Button Group
Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls,
or any set of actions that belong together.
< wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" > </ wa-button> < wa-buttonappearance = " filled" > </ wa-button> < wa-buttonappearance = " filled" > </ wa-button> </ wa-button-group>
Code
Give every button group a label.
Examples
Link to This Section
Orientation
Link to This Section
Set the orientation attribute to vertical to stack the buttons instead of placing them side by side.
< wa-button-grouporientation = " vertical" label = " Options" > < wa-buttonappearance = " filled" > </ wa-button> < wa-buttonappearance = " filled" > </ wa-button> < wa-buttonappearance = " filled" > </ wa-button> </ wa-button-group>
Code
Pill
Link to This Section
Add the pill attribute to each button to round the group's outer edges.
< wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" size = " m" pill > </ wa-button> < wa-buttonappearance = " filled" size = " m" pill > </ wa-button> < wa-buttonappearance = " filled" size = " m" pill > </ wa-button> </ wa-button-group>
Code
Dropdowns
Link to This Section
Place a dropdown anywhere in the group to attach a menu of related actions.
Edit
More
Cut
Copy
Paste
Delete
< wa-button-grouplabel = " Options" > < wa-buttonappearance = " filled" > </ wa-button> < wa-dropdown> < wa-buttonappearance = " filled" slot = " trigger" with-caret > </ wa-button> < wa-dropdown-item> </ wa-dropdown-item> < wa-dropdown-item> </ wa-dropdown-item> < wa-dropdown-item> </ wa-dropdown-item> </ wa-dropdown> < wa-buttonappearance = " filled" > </ wa-button> </ wa-button-group>
Code
Link to This Section
Pair a primary button with a dropdown to make a split button. Give the dropdown trigger an accessible label so people using assistive devices know what it opens.
Save
Save
Save as…
Save all
< wa-button-grouplabel = " Save" > < wa-buttonappearance = " filled" variant = " brand" > </ wa-button> < wa-dropdownplacement = " bottom-end" > < wa-buttonappearance = " filled" slot = " trigger" variant = " brand" > < wa-iconname = " chevron-down" label = " More options" > </ wa-icon> </ wa-button> < wa-dropdown-item> </ wa-dropdown-item> < wa-dropdown-item> … </ wa-dropdown-item> < wa-dropdown-item> </ wa-dropdown-item> </ wa-dropdown> </ wa-button-group>
Code
Link to This Section
Pair each button with a tooltip to explain what it does on hover and focus.
Left
Center
Right
Align left
Align center
Align right
< wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" id = " button-left" > </ wa-button> < wa-buttonappearance = " filled" id = " button-center" > </ wa-button> < wa-buttonappearance = " filled" id = " button-right" > </ wa-button> </ wa-button-group> < wa-tooltipfor = " button-left" > </ wa-tooltip> < wa-tooltipfor = " button-center" > </ wa-tooltip> < wa-tooltipfor = " button-right" > </ wa-tooltip>
Code
Link to This Section
Combine several button groups into a toolbar of related action sets. Use icon-only buttons with label for compact controls, and tooltips to name each one.
Undo
Redo
Bold
Italic
Underline
Align left
Align center
Align right
< divclass = " button-group-toolbar wa-cluster" > < wa-button-grouplabel = " History" > < wa-buttonappearance = " filled" id = " undo-button" > < wa-iconname = " undo" variant = " solid" label = " Undo" > </ wa-icon> </ wa-button> < wa-buttonappearance = " filled" id = " redo-button" > < wa-iconname = " redo" variant = " solid" label = " Redo" > </ wa-icon> </ wa-button> </ wa-button-group> < wa-button-grouplabel = " Formatting" > < wa-buttonappearance = " filled" id = " button-bold" > < wa-iconname = " bold" variant = " solid" label = " Bold" > </ wa-icon> </ wa-button> < wa-buttonappearance = " filled" id = " button-italic" > < wa-iconname = " italic" variant = " solid" label = " Italic" > </ wa-icon> </ wa-button> < wa-buttonappearance = " filled" id = " button-underline" > < wa-iconname = " underline" variant = " solid" label = " Underline" > </ wa-icon> </ wa-button> </ wa-button-group> < wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" id = " button-align-left" > < wa-iconname = " align-left" variant = " solid" label = " Align left" > </ wa-icon> </ wa-button> < wa-buttonappearance = " filled" id = " button-align-center" > < wa-iconname = " align-center" variant = " solid" label = " Align center" > </ wa-icon> </ wa-button> < wa-buttonappearance = " filled" id = " button-align-right" > < wa-iconname = " align-right" variant = " solid" label = " Align right" > </ wa-icon> </ wa-button> </ wa-button-group> </ div> < wa-tooltipfor = " undo-button" > </ wa-tooltip> < wa-tooltipfor = " redo-button" > </ wa-tooltip> < wa-tooltipfor = " button-bold" > </ wa-tooltip> < wa-tooltipfor = " button-italic" > </ wa-tooltip> < wa-tooltipfor = " button-underline" > </ wa-tooltip> < wa-tooltipfor = " button-align-left" > </ wa-tooltip> < wa-tooltipfor = " button-align-center" > </ wa-tooltip> < wa-tooltipfor = " button-align-right" > </ wa-tooltip>
Code
Link to This Section
Button groups also work with native <button> elements when Native Styles are included.
< wa-button-grouplabel = " Alignment" > < buttonclass = " wa-filled" > </ button> < buttonclass = " wa-filled" > </ button> < buttonclass = " wa-filled" > </ button> </ wa-button-group>
Code
API
Link to This Section
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.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected] /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>
Attributes & Properties
Link to This Section
Learn more about attributes and properties .
Name
Description
Reflects
labellabel
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 ''
orientationorientation
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
baseDeprecated. Style the host element instead.
::part(base)
Need a hand?