Button Group

Displays a set of related buttons in a horizontal or vertical arrangement.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusButton Group } from '@plusui/react';

import { PlusButton GroupComponent } from '@plusui/angular';

import { PlusButton Group } from '@plusui/vue';

import PlusButton Group from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusButton Group />

<plus-button group />

<plus-button group />

<PlusButton Group />

<plus-button group />

Docs

Changelog

Button group Changelog

Recent changes and updates for the button group component

📝

No entries found

No changelog entries found for button group component.

The Button Group component organizes multiple related buttons into a single cohesive unit, providing a clear visual relationship between similar actions. This component is useful for creating segmented controls, toolbars, and pagination interfaces.

Anatomy

Usage

Basic Example

Create a button group by wrapping multiple plus-button components within a plus-button-group.

Left

Middle

Right

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup>
        <PlusButton kind="filled" status="primary">
          Left
        </PlusButton>
        <PlusButton kind="filled" status="primary">
          Middle
        </PlusButton>
        <PlusButton kind="filled" status="primary">
          Right
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group>
      <plus-button kind="filled" status="primary">
        Left
      </plus-button>
      <plus-button kind="filled" status="primary">
        Middle
      </plus-button>
      <plus-button kind="filled" status="primary">
        Right
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group>
    <plus-button kind="filled" status="primary">
      Left
    </plus-button>
    <plus-button kind="filled" status="primary">
      Middle
    </plus-button>
    <plus-button kind="filled" status="primary">
      Right
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group>
  <plus-button kind="filled" status="primary">
    Left
  </plus-button>
  <plus-button kind="filled" status="primary">
    Middle
  </plus-button>
  <plus-button kind="filled" status="primary">
    Right
  </plus-button>
</plus-button-group>

<plus-button-group>
  <plus-button kind="filled" status="primary">
    Left
  </plus-button>
  <plus-button kind="filled" status="primary">
    Middle
  </plus-button>
  <plus-button kind="filled" status="primary">
    Right
  </plus-button>
</plus-button-group>

Override Properties

Use the override property to make all buttons in the group inherit the properties defined on the button group. This ensures visual consistency between all buttons.

Save

Cancel

Reset

Save

Cancel

Reset

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup override="true" kind="outlined" status="success" size="md">
        <PlusButton>
          Save
        </PlusButton>
        <PlusButton>
          Cancel
        </PlusButton>
        <PlusButton>
          Reset
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup override="false" kind="outlined" status="success" size="md">
        <PlusButton>
          Save
        </PlusButton>
        <PlusButton>
          Cancel
        </PlusButton>
        <PlusButton>
          Reset
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group override="true" kind="outlined" status="success" size="md">
      <plus-button>
        Save
      </plus-button>
      <plus-button>
        Cancel
      </plus-button>
      <plus-button>
        Reset
      </plus-button>
    </plus-button-group>
    <plus-button-group override="false" kind="outlined" status="success" size="md">
      <plus-button>
        Save
      </plus-button>
      <plus-button>
        Cancel
      </plus-button>
      <plus-button>
        Reset
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group override="true" kind="outlined" status="success" size="md">
    <plus-button>
      Save
    </plus-button>
    <plus-button>
      Cancel
    </plus-button>
    <plus-button>
      Reset
    </plus-button>
  </plus-button-group>
  <plus-button-group override="false" kind="outlined" status="success" size="md">
    <plus-button>
      Save
    </plus-button>
    <plus-button>
      Cancel
    </plus-button>
    <plus-button>
      Reset
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group override="true" kind="outlined" status="success" size="md">
  <plus-button>
    Save
  </plus-button>
  <plus-button>
    Cancel
  </plus-button>
  <plus-button>
    Reset
  </plus-button>
</plus-button-group>
<plus-button-group override="false" kind="outlined" status="success" size="md">
  <plus-button>
    Save
  </plus-button>
  <plus-button>
    Cancel
  </plus-button>
  <plus-button>
    Reset
  </plus-button>
</plus-button-group>

<plus-button-group override="true" kind="outlined" status="success" size="md">
  <plus-button>
    Save
  </plus-button>
  <plus-button>
    Cancel
  </plus-button>
  <plus-button>
    Reset
  </plus-button>
</plus-button-group>
<plus-button-group override="false" kind="outlined" status="success" size="md">
  <plus-button>
    Save
  </plus-button>
  <plus-button>
    Cancel
  </plus-button>
  <plus-button>
    Reset
  </plus-button>
</plus-button-group>

Orientation

Use the orientation property to arrange buttons horizontally (default) or vertically.

Day

Week

Month

Day

Week

Month

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup orientation="horizontal" kind="filled" status="primary">
        <PlusButton>
          Day
        </PlusButton>
        <PlusButton>
          Week
        </PlusButton>
        <PlusButton>
          Month
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup orientation="vertical" kind="filled" status="primary">
        <PlusButton>
          Day
        </PlusButton>
        <PlusButton>
          Week
        </PlusButton>
        <PlusButton>
          Month
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group orientation="horizontal" kind="filled" status="primary">
      <plus-button>
        Day
      </plus-button>
      <plus-button>
        Week
      </plus-button>
      <plus-button>
        Month
      </plus-button>
    </plus-button-group>
    <plus-button-group orientation="vertical" kind="filled" status="primary">
      <plus-button>
        Day
      </plus-button>
      <plus-button>
        Week
      </plus-button>
      <plus-button>
        Month
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group orientation="horizontal" kind="filled" status="primary">
    <plus-button>
      Day
    </plus-button>
    <plus-button>
      Week
    </plus-button>
    <plus-button>
      Month
    </plus-button>
  </plus-button-group>
  <plus-button-group orientation="vertical" kind="filled" status="primary">
    <plus-button>
      Day
    </plus-button>
    <plus-button>
      Week
    </plus-button>
    <plus-button>
      Month
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group orientation="horizontal" kind="filled" status="primary">
  <plus-button>
    Day
  </plus-button>
  <plus-button>
    Week
  </plus-button>
  <plus-button>
    Month
  </plus-button>
</plus-button-group>
<plus-button-group orientation="vertical" kind="filled" status="primary">
  <plus-button>
    Day
  </plus-button>
  <plus-button>
    Week
  </plus-button>
  <plus-button>
    Month
  </plus-button>
</plus-button-group>

<plus-button-group orientation="horizontal" kind="filled" status="primary">
  <plus-button>
    Day
  </plus-button>
  <plus-button>
    Week
  </plus-button>
  <plus-button>
    Month
  </plus-button>
</plus-button-group>
<plus-button-group orientation="vertical" kind="filled" status="primary">
  <plus-button>
    Day
  </plus-button>
  <plus-button>
    Week
  </plus-button>
  <plus-button>
    Month
  </plus-button>
</plus-button-group>

Button Styles (kind and status)

Button group can control the visual style and color of all its buttons when using the override property.

Cut

Copy

Paste

Cut

Copy

Paste

Cut

Copy

Paste

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup kind="outlined" status="primary" override="true">
        <PlusButton>
          Cut
        </PlusButton>
        <PlusButton>
          Copy
        </PlusButton>
        <PlusButton>
          Paste
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup kind="dashed" status="warning" override="true">
        <PlusButton>
          Cut
        </PlusButton>
        <PlusButton>
          Copy
        </PlusButton>
        <PlusButton>
          Paste
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup kind="text" status="default" override="true">
        <PlusButton>
          Cut
        </PlusButton>
        <PlusButton>
          Copy
        </PlusButton>
        <PlusButton>
          Paste
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group kind="outlined" status="primary" override="true">
      <plus-button>
        Cut
      </plus-button>
      <plus-button>
        Copy
      </plus-button>
      <plus-button>
        Paste
      </plus-button>
    </plus-button-group>
    <plus-button-group kind="dashed" status="warning" override="true">
      <plus-button>
        Cut
      </plus-button>
      <plus-button>
        Copy
      </plus-button>
      <plus-button>
        Paste
      </plus-button>
    </plus-button-group>
    <plus-button-group kind="text" status="default" override="true">
      <plus-button>
        Cut
      </plus-button>
      <plus-button>
        Copy
      </plus-button>
      <plus-button>
        Paste
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group kind="outlined" status="primary" override="true">
    <plus-button>
      Cut
    </plus-button>
    <plus-button>
      Copy
    </plus-button>
    <plus-button>
      Paste
    </plus-button>
  </plus-button-group>
  <plus-button-group kind="dashed" status="warning" override="true">
    <plus-button>
      Cut
    </plus-button>
    <plus-button>
      Copy
    </plus-button>
    <plus-button>
      Paste
    </plus-button>
  </plus-button-group>
  <plus-button-group kind="text" status="default" override="true">
    <plus-button>
      Cut
    </plus-button>
    <plus-button>
      Copy
    </plus-button>
    <plus-button>
      Paste
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group kind="outlined" status="primary" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>
<plus-button-group kind="dashed" status="warning" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>
<plus-button-group kind="text" status="default" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>

<plus-button-group kind="outlined" status="primary" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>
<plus-button-group kind="dashed" status="warning" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>
<plus-button-group kind="text" status="default" override="true">
  <plus-button>
    Cut
  </plus-button>
  <plus-button>
    Copy
  </plus-button>
  <plus-button>
    Paste
  </plus-button>
</plus-button-group>

Size

Control the size of all buttons within the group using the size property. This ensures consistent sizing across the entire group.

Button 1

Button 2

Button 1

Button 2

Button 1

Button 2

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup size="sm" override="true">
        <PlusButton>
          Button 1
        </PlusButton>
        <PlusButton>
          Button 2
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup size="md" override="true">
        <PlusButton>
          Button 1
        </PlusButton>
        <PlusButton>
          Button 2
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup size="lg" override="true">
        <PlusButton>
          Button 1
        </PlusButton>
        <PlusButton>
          Button 2
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group size="sm" override="true">
      <plus-button>
        Button 1
      </plus-button>
      <plus-button>
        Button 2
      </plus-button>
    </plus-button-group>
    <plus-button-group size="md" override="true">
      <plus-button>
        Button 1
      </plus-button>
      <plus-button>
        Button 2
      </plus-button>
    </plus-button-group>
    <plus-button-group size="lg" override="true">
      <plus-button>
        Button 1
      </plus-button>
      <plus-button>
        Button 2
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group size="sm" override="true">
    <plus-button>
      Button 1
    </plus-button>
    <plus-button>
      Button 2
    </plus-button>
  </plus-button-group>
  <plus-button-group size="md" override="true">
    <plus-button>
      Button 1
    </plus-button>
    <plus-button>
      Button 2
    </plus-button>
  </plus-button-group>
  <plus-button-group size="lg" override="true">
    <plus-button>
      Button 1
    </plus-button>
    <plus-button>
      Button 2
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group size="sm" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>
<plus-button-group size="md" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>
<plus-button-group size="lg" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>

<plus-button-group size="sm" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>
<plus-button-group size="md" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>
<plus-button-group size="lg" override="true">
  <plus-button>
    Button 1
  </plus-button>
  <plus-button>
    Button 2
  </plus-button>
</plus-button-group>

Disabled and Loading State

Control the state of all buttons in the group with the disabled and loading properties.

Normal

Buttons

Normal

Buttons

Normal

Buttons

Normal

Buttons

Show code

import { PlusButtonGroup, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusButtonGroup disabled="false" loading="false" override="true">
        <PlusButton>
          Normal
        </PlusButton>
        <PlusButton>
          Buttons
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup disabled="false" loading="true" override="true">
        <PlusButton>
          Normal
        </PlusButton>
        <PlusButton>
          Buttons
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup disabled="true" loading="false" override="true">
        <PlusButton>
          Normal
        </PlusButton>
        <PlusButton>
          Buttons
        </PlusButton>
      </PlusButtonGroup>
      <PlusButtonGroup disabled="true" loading="true" override="true">
        <PlusButton>
          Normal
        </PlusButton>
        <PlusButton>
          Buttons
        </PlusButton>
      </PlusButtonGroup>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-button-group disabled="false" loading="false" override="true">
      <plus-button>
        Normal
      </plus-button>
      <plus-button>
        Buttons
      </plus-button>
    </plus-button-group>
    <plus-button-group disabled="false" loading="true" override="true">
      <plus-button>
        Normal
      </plus-button>
      <plus-button>
        Buttons
      </plus-button>
    </plus-button-group>
    <plus-button-group disabled="true" loading="false" override="true">
      <plus-button>
        Normal
      </plus-button>
      <plus-button>
        Buttons
      </plus-button>
    </plus-button-group>
    <plus-button-group disabled="true" loading="true" override="true">
      <plus-button>
        Normal
      </plus-button>
      <plus-button>
        Buttons
      </plus-button>
    </plus-button-group>
  `
})
export class ExampleComponent {}

<template>
  <plus-button-group disabled="false" loading="false" override="true">
    <plus-button>
      Normal
    </plus-button>
    <plus-button>
      Buttons
    </plus-button>
  </plus-button-group>
  <plus-button-group disabled="false" loading="true" override="true">
    <plus-button>
      Normal
    </plus-button>
    <plus-button>
      Buttons
    </plus-button>
  </plus-button-group>
  <plus-button-group disabled="true" loading="false" override="true">
    <plus-button>
      Normal
    </plus-button>
    <plus-button>
      Buttons
    </plus-button>
  </plus-button-group>
  <plus-button-group disabled="true" loading="true" override="true">
    <plus-button>
      Normal
    </plus-button>
    <plus-button>
      Buttons
    </plus-button>
  </plus-button-group>
</template>

<plus-button-group disabled="false" loading="false" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="false" loading="true" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="true" loading="false" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="true" loading="true" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>

<plus-button-group disabled="false" loading="false" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="false" loading="true" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="true" loading="false" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>
<plus-button-group disabled="true" loading="true" override="true">
  <plus-button>
    Normal
  </plus-button>
  <plus-button>
    Buttons
  </plus-button>
</plus-button-group>

Visual Sections

Layout & Spacing

Light & Dark Mode

Keyboard Behavior:
- Users can navigate between buttons using the Tab key.
- Each button can be activated using Enter or Space.
Screen Reader:
- The button group has role="group" to indicate to assistive technologies that these buttons are related.
Required Developer Actions:
- Ensure that button text is descriptive and clearly indicates its action.
- Consider adding an additional aria-label attribute to the button group if the purpose of the group is not clear from button text alone.

API Reference

Properties

Name	Type	Default	Description	Required
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the button group.	No
`override`	`boolean`	`true`	When true, button group properties override child button properties.	No
`kind`	`'filled' \| 'outlined' \| 'dashed' \| 'text'`	`'filled'`	The visual style of buttons when override is true.	No
`status`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	The color variant of buttons when override is true.	No
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of all buttons in the group when override is true.	No
`disabled`	`boolean`	`false`	Disables all buttons in the group when override is true.	No
`loading`	`boolean`	`false`	Shows loading state for all buttons when override is true.	No

Slots

Name	Description
(default)	Container for button elements.

CSS Shadow Parts

Part	Description
`base`	The component’s base wrapper.

CSS Custom Properties

Name	Description
`--button-group-gap`	Gap between buttons in the group (default is 0).

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Button Group

Import

Package

Usage

Docs

Changelog

Button group Changelog

No entries found

Anatomy

Usage

Basic Example

Override Properties

Orientation

Button Styles (kind and status)

Size

Disabled and Loading State

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

API Reference

Properties

Slots

CSS Shadow Parts

CSS Custom Properties

Join the Community