A wrapper for multiple, related buttons.
Component
Button group
Other names: Toolbar
45 examples
Button Group
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Button Dock
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Button group
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Button group
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
Button group
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Form buttons
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Button group
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Button group
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
Toolbar
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
CommandBar
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
Button group
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
ButtonGroup
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Button group
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Button set
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
Button Group
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button group
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Button Group
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Button container
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Button Group
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Button group
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Button group
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Button group
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Page actions
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Button Group
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Action bar
Primer
GitHub
- React
- Code examples
- Open source
Button group
Primer
GitHub
- React
- Code examples
- Open source
Button Group
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Group
Reakit
- React
- Code examples
- Open source
- Accessibility
Button Group
Ruter Components
- React
- Code examples
- Unmaintained
Button Group
Seek style guide
- React
- Code examples
- Unmaintained
Toggle Group
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Button group
Shoelace
- Web Components
- Code examples
- Open source
Button Group
Solid
Buzzfeed
- CSS
- Code examples
- Usage guidelines
- Accessibility issues
- Unmaintained
Action group
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button group
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Quick actions
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button Group
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Button Row
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Button group
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Action Bar
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Description
A button group is a wrapper for related buttons; useful if you want to display multiple, related actions together.
Markup
Add the correct role attribute to the button group: e.g. role="group" or role="toolbar", to communicate that the buttons are grouped to users of assistive technologies.
Usage guidelines
- Use consistent rules for the order of buttons across different button groups. One possible rule is to keep primary actions (e.g. submitting a form) on the right and secondary actions (e.g. cancel, go back) on the left.
