Button Group

<wa-button-group>

Since 2.0

stable

Button groups can be used to group related buttons into sections.

                
  Left
  Center
  Right

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

Examples Jump to heading

Vertical Button Groups Jump to heading

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

                
    New
  
    Open
  
    Save
  
    Print

<wa-button-group orientation="vertical" label="Options">
  <wa-button>
    <wa-icon slot="start" name="plus"></wa-icon>
    New
  </wa-button>
  <wa-button>
    <wa-icon slot="start" name="folder-open"></wa-icon>
    Open
  </wa-button>
  <wa-button>
    <wa-icon slot="start" name="save"></wa-icon>
    Save
  </wa-button>
  <wa-button>
    <wa-icon slot="start" name="print"></wa-icon>
    Print
  </wa-button>
</wa-button-group>

Theme Buttons Jump to heading

Theme buttons are supported through the button group's variant attribute.

                
  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

<wa-button-group label="Alignment" variant="brand">
  <wa-button>Left</wa-button>
  <wa-button>Center</wa-button>
  <wa-button>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment" variant="success">
  <wa-button>Left</wa-button>
  <wa-button>Center</wa-button>
  <wa-button>Right</wa-button>
</wa-button-group>

<br /><br />

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

<br /><br />

<wa-button-group label="Alignment" variant="warning">
  <wa-button>Left</wa-button>
  <wa-button>Center</wa-button>
  <wa-button>Right</wa-button>
</wa-button-group>

<br /><br />

<wa-button-group label="Alignment" variant="danger">
  <wa-button>Left</wa-button>
  <wa-button>Center</wa-button>
  <wa-button>Right</wa-button>
</wa-button-group>

You can still use the buttons’ own variant attribute to override the inherited variant.

                
  Left
  Center
  Right

<wa-button-group label="Alignment" variant="brand">
  <wa-button>Left</wa-button>
  <wa-button>Center</wa-button>
  <wa-button variant="neutral">Right</wa-button>
</wa-button-group>

Pill Buttons Jump to heading

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

                
  Left
  Center
  Right

  Left
  Center
  Right

  Left
  Center
  Right

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

<br /><br />

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

<br /><br />

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

Dropdowns in Button Groups Jump to heading

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>Button</wa-button>
  <wa-dropdown>
    <wa-button 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>Button</wa-button>
</wa-button-group>

Split Buttons Jump to heading

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 variant="brand">Save</wa-button>
  <wa-dropdown placement="bottom-end">
    <wa-button 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 Jump to heading

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 id="button-left">Left</wa-button>
  <wa-button id="button-center">Center</wa-button>
  <wa-button 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>

Create interactive toolbars with button groups.

  
UndoRedoBoldItalicUnderlineAlign LeftAlign CenterAlign Right

<div class="button-group-toolbar">
  <wa-button-group label="History">
    <wa-button id="undo-button"><wa-icon name="undo" variant="solid" label="Undo"></wa-icon></wa-button>
    <wa-button 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 id="button-bold"><wa-icon name="bold" variant="solid" label="Bold"></wa-icon></wa-button>
    <wa-button id="button-italic"><wa-icon name="italic" variant="solid" label="Italic"></wa-icon></wa-button>
    <wa-button 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 id="button-align-left">
      <wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon>
    </wa-button>
    <wa-button id="button-align-center">
      <wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon>
    </wa-button>
    <wa-button 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>

Slots Jump to heading

Learn more about using slots.

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

Attributes & Properties Jump to heading

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 Jump to heading

Learn more about CSS parts.

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

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code.

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

To manually import this component from React, use the following code.

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

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Components

Style Utilities

Layout

Patterns

Theming

Design Tokens

Terms & Policies

Web Awesome

Button Group

Examples Jump to heading

Vertical Button Groups Jump to heading

Theme Buttons Jump to heading

Pill Buttons Jump to heading

Dropdowns in Button Groups Jump to heading

Split Buttons Jump to heading

Tooltips in Button Groups Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

CSS parts Jump to heading

Importing Jump to heading

Get a lifetime discount on Web Awesome Pro!

Getting Started

Resources

Components

Style Utilities

Layout

Patterns

Theming

Design Tokens

Terms & Policies

Web Awesome

Web Awesome Elsewhere

Button Group

Examples Jump to heading

Vertical Button Groups Jump to heading

Theme Buttons Jump to heading

Pill Buttons Jump to heading

Dropdowns in Button Groups Jump to heading

Split Buttons Jump to heading

Tooltips in Button Groups Jump to heading

Toolbar Example Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

CSS parts Jump to heading

Importing Jump to heading

Get a lifetime discount on Web Awesome Pro!