Button Group

<wa-button-group>

Stable

Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls, or any set of actions that belong together.

  Left
  Center
  Right

<wa-button-group label="Alignment">
  <wa-button appearance="filled">Left</wa-button>
  <wa-button appearance="filled">Center</wa-button>
  <wa-button appearance="filled">Right</wa-button>
</wa-button-group>

Examples

Link to This Section

Vertical Button Groups

Link to This Section

Set the orientation attribute to vertical to make a vertical button group.

  Button
  
    Dropdown
    Item 1
    Item 2
    Item 3
  
  Button

<wa-button-group orientation="vertical" label="Options">
  <wa-button appearance="filled">Button</wa-button>
  <wa-dropdown>
    <wa-button appearance="filled" slot="trigger" with-caret>Dropdown</wa-button>
    <wa-dropdown-item>Item 1</wa-dropdown-item>
    <wa-dropdown-item>Item 2</wa-dropdown-item>
    <wa-dropdown-item>Item 3</wa-dropdown-item>
  </wa-dropdown>
  <wa-button appearance="filled">Button</wa-button>
</wa-button-group>

Pill Buttons

Link to This Section

Pill buttons are supported through the button's pill attribute.

  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

<wa-button-group label="Alignment">
  <wa-button appearance="filled" size="xs" pill>Left</wa-button>
  <wa-button appearance="filled" size="xs" pill>Center</wa-button>
  <wa-button appearance="filled" size="xs" pill>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment">
  <wa-button appearance="filled" size="s" pill>Left</wa-button>
  <wa-button appearance="filled" size="s" pill>Center</wa-button>
  <wa-button appearance="filled" size="s" pill>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment">
  <wa-button appearance="filled" size="m" pill>Left</wa-button>
  <wa-button appearance="filled" size="m" pill>Center</wa-button>
  <wa-button appearance="filled" size="m" pill>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment">
  <wa-button appearance="filled" size="l" pill>Left</wa-button>
  <wa-button appearance="filled" size="l" pill>Center</wa-button>
  <wa-button appearance="filled" size="l" pill>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment">
  <wa-button appearance="filled" size="xl" pill>Left</wa-button>
  <wa-button appearance="filled" size="xl" pill>Center</wa-button>
  <wa-button appearance="filled" size="xl" pill>Right</wa-button>
</wa-button-group>

Dropdowns in Button Groups

Link to This Section

Dropdowns can be placed into button groups.

  Button
  
    Dropdown
    Item 1
    Item 2
    Item 3
  
  Button

<wa-button-group label="Example Button Group">
  <wa-button appearance="filled">Button</wa-button>
  <wa-dropdown>
    <wa-button appearance="filled" slot="trigger" with-caret>Dropdown</wa-button>
    <wa-dropdown-item>Item 1</wa-dropdown-item>
    <wa-dropdown-item>Item 2</wa-dropdown-item>
    <wa-dropdown-item>Item 3</wa-dropdown-item>
  </wa-dropdown>
  <wa-button appearance="filled">Button</wa-button>
</wa-button-group>

Split Buttons

Link to This Section

Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.

  Save
  
    Save
    Save as…
    Save all

<wa-button-group label="Example Button Group">
  <wa-button appearance="filled" variant="brand">Save</wa-button>
  <wa-dropdown placement="bottom-end">
    <wa-button appearance="filled" slot="trigger" variant="brand">
      <wa-icon name="chevron-down" label="More options"></wa-icon>
    </wa-button>
    <wa-dropdown-item>Save</wa-dropdown-item>
    <wa-dropdown-item>Save as&hellip;</wa-dropdown-item>
    <wa-dropdown-item>Save all</wa-dropdown-item>
  </wa-dropdown>
</wa-button-group>

Tooltips in Button Groups

Link to This Section

Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

  Left
  Center
  Right

I'm on the left
I'm in the middle
I'm on the right

<wa-button-group label="Alignment">
  <wa-button appearance="filled" id="button-left">Left</wa-button>
  <wa-button appearance="filled" id="button-center">Center</wa-button>
  <wa-button appearance="filled" id="button-right">Right</wa-button>
</wa-button-group>

<wa-tooltip for="button-left">I'm on the left</wa-tooltip>
<wa-tooltip for="button-center">I'm in the middle</wa-tooltip>
<wa-tooltip for="button-right">I'm on the right</wa-tooltip>

Link to This Section

Create interactive toolbars with button groups.

  
UndoRedoBoldItalicUnderlineAlign LeftAlign CenterAlign Right

<div class="button-group-toolbar">
  <wa-button-group label="History">
    <wa-button appearance="filled" id="undo-button"><wa-icon name="undo" variant="solid" label="Undo"></wa-icon></wa-button>
    <wa-button appearance="filled" id="redo-button"><wa-icon name="redo" variant="solid" label="Redo"></wa-icon></wa-button>
  </wa-button-group>

  <wa-button-group label="Formatting">
    <wa-button appearance="filled" id="button-bold"><wa-icon name="bold" variant="solid" label="Bold"></wa-icon></wa-button>
    <wa-button appearance="filled" id="button-italic"><wa-icon name="italic" variant="solid" label="Italic"></wa-icon></wa-button>
    <wa-button appearance="filled" id="button-underline"><wa-icon name="underline" variant="solid" label="Underline"></wa-icon></wa-button>
  </wa-button-group>

  <wa-button-group label="Alignment">
    <wa-button appearance="filled" id="button-align-left">
      <wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon>
    </wa-button>
    <wa-button appearance="filled" id="button-align-center">
      <wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon>
    </wa-button>
    <wa-button appearance="filled" id="button-align-right">
      <wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon>
    </wa-button>
  </wa-button-group>
</div>

<wa-tooltip for="undo-button">Undo</wa-tooltip>
<wa-tooltip for="redo-button">Redo</wa-tooltip>
<wa-tooltip for="button-bold">Bold</wa-tooltip>
<wa-tooltip for="button-italic">Italic</wa-tooltip>
<wa-tooltip for="button-underline">Underline</wa-tooltip>

<wa-tooltip for="button-align-left">Align Left</wa-tooltip>
<wa-tooltip for="button-align-center">Align Center</wa-tooltip>
<wa-tooltip for="button-align-right">Align Right</wa-tooltip>

<style>
  .button-group-toolbar wa-button-group:not(:last-of-type) {
    margin-right: var(--wa-space-xs);
  }
</style>

Native Buttons

Link to This Section

Button groups also work with native <button> elements when Native Styles are included.

<wa-button-group label="Alignment">
  <button class="wa-filled">Left</button>
  <button class="wa-filled">Center</button>
  <button class="wa-filled">Right</button>
</wa-button-group>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/button-group/button-group.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/button-group/button-group.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/button-group/button-group.js';

To import this component for React 18 or below, use the following code:

import WaButtonGroup from '@awesome.me/webawesome/dist/react/button-group/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	One or more `<wa-button>` elements to display in the button group.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`label` `label`	A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended. Type `string` Default `''`
`orientation` `orientation`	The button group's orientation. Type `'horizontal' \| 'vertical'` Default `'horizontal'`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`base`	The component's base wrapper.	`::part(base)`

Need a hand?

Report a bug

Ask for help

Button Group

Examples

Vertical Button Groups

Pill Buttons

Dropdowns in Button Groups

Split Buttons

Tooltips in Button Groups

Native Buttons

Importing

Slots

Attributes & Properties

CSS Parts

Quick Links

Recent Searches

Button Group

Examples

Vertical Button Groups

Pill Buttons

Dropdowns in Button Groups

Split Buttons

Tooltips in Button Groups

Toolbar Example

Native Buttons

Importing

Slots

Attributes & Properties

CSS Parts

Quick Links

Recent Searches