On this page
Button Group
<wa-button-group>
Since 2.0
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
Examples
Link to This Section
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-grouporientation = " vertical" label = " 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
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-grouplabel = " Alignment" > < wa-buttonappearance = " filled" size = " xs" pill > </ wa-button> < wa-buttonappearance = " filled" size = " xs" pill > </ wa-button> < wa-buttonappearance = " filled" size = " xs" pill > </ wa-button> </ wa-button-group> < br/> < br/> < wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" size = " s" pill > </ wa-button> < wa-buttonappearance = " filled" size = " s" pill > </ wa-button> < wa-buttonappearance = " filled" size = " s" pill > </ wa-button> </ wa-button-group> < br/> < br/> < 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> < br/> < br/> < wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" size = " l" pill > </ wa-button> < wa-buttonappearance = " filled" size = " l" pill > </ wa-button> < wa-buttonappearance = " filled" size = " l" pill > </ wa-button> </ wa-button-group> < br/> < br/> < wa-button-grouplabel = " Alignment" > < wa-buttonappearance = " filled" size = " xl" pill > </ wa-button> < wa-buttonappearance = " filled" size = " xl" pill > </ wa-button> < wa-buttonappearance = " filled" size = " xl" pill > </ wa-button> </ wa-button-group>
Code
Link to This Section
Dropdowns can be placed into button groups.
Button
Dropdown
Item 1
Item 2
Item 3
Button
< wa-button-grouplabel = " Example Button Group" > < 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
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-grouplabel = " Example Button Group" > < 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
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-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
Create interactive toolbars with button groups.
Undo
Redo
Bold
Italic
Underline
Align Left
Align Center
Align Right
< divclass = " button-group-toolbar" > < 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> < style>
.button-group-toolbar wa-button-group:not(:last-of-type) {
margin-right : var ( --wa-space-xs) ;
}
</ style>
Code
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
css
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type CSSResultGroup | undefined
Default [styles]
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
baseThe component's base wrapper.
::part(base)
Need a hand?