Button Group
<wa-button-group>
Button groups can be used to group related buttons into sections.
<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
Button Sizes Jump to heading
Unless otherwise specified,
the size of buttons will be determined by the Button Group's size
attribute.
<wa-button-group size="small" 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 size="medium" 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 size="large" label="Alignment"> <wa-button>Left</wa-button> <wa-button>Center</wa-button> <wa-button>Right</wa-button> </wa-button-group>
While you can still set the size of buttons individually, and it will override the inherited size, it is rarely a good idea to mix sizes within the same button group.
Vertical button groups Jump to heading
Set the orientation
attribute to vertical
to make a vertical button group.
<wa-button-group orientation="vertical" label="Options" style="max-width: 80px;"> <wa-button> <wa-icon slot="prefix" name="plus"></wa-icon> New </wa-button> <wa-button> <wa-icon slot="prefix" name="folder-open"></wa-icon> Open </wa-button> <wa-button> <wa-icon slot="prefix" name="save"></wa-icon> Save </wa-button> <wa-button> <wa-icon slot="prefix" 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.
<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.
<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.
<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 and Native Buttons in Button Groups Jump to heading
Other elements can also be placed inside button groups:
- Native buttons as long as their native styles are included
- Dropdowns as long as the trigger is either a
<wa-button>
, or a<button>
with native styles included.
<wa-button-group label="Example Button Group"> <wa-button>Button</wa-button> <button>Native Button</button> <wa-dropdown hoist> <wa-button slot="trigger" caret>Dropdown</wa-button> <wa-menu> <wa-menu-item>Item 1</wa-menu-item> <wa-menu-item>Item 2</wa-menu-item> <wa-menu-item>Item 3</wa-menu-item> </wa-menu> </wa-dropdown> </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.
<wa-button-group label="Example Button Group"> <wa-button variant="brand">Save</wa-button> <wa-dropdown placement="bottom-end" hoist> <wa-button slot="trigger" variant="brand" caret> <span class="wa-visually-hidden">More options</span> </wa-button> <wa-menu> <wa-menu-item>Save</wa-menu-item> <wa-menu-item>Save as…</wa-menu-item> <wa-menu-item>Save all</wa-menu-item> </wa-menu> </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.
<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>
Toolbar Example Jump to heading
Create interactive toolbars with button groups.
<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' |
|
|
size size |
The component's size.
Type
'small' | 'medium' | 'large' | 'inherit' Default
'inherit' |
|
|
variant variant |
The button group's theme variant. Defaults to
neutral if not within another element with a variant.Type
'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' Default
'inherit' |
|
CSS parts Jump to heading
Learn more about CSS parts.
Name | Description |
---|---|
base |
The component's base wrapper. |
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/components/button-group/button-group.js';