Component

Button group

Also known as: Toolbar

A wrapper for multiple, related buttons.

37 Examples

Filter:

  • Button Group

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Button Dock

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Button group

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Button group

    Bootstrap

    Tech

    • Sass

    Features

    • Code examples
    • Accessibility
    • Open source

  • Button group

    Clarity Design System

    Tech

    • CSS
    • Angular
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Form buttons

    Coral

    Tech

    • React

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Button group

    Crayons

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • ButtonGroup

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • Button group

    Flowbite

    Tech

    • Tailwind CSS

    Features

    • Open source
    • Code examples

  • CommandBar

    Fluent UI

    Tech

    • React
    • Web Components
    • Mobile

    Features

    • Usage guidelines
    • Code examples
    • Accessibility
    • Open source

  • Button group

    Forma 36

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • ButtonGroup

    Gestalt

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Open source
    • Usage guidelines

  • Button set

    Helios

    Tech

    • Ember
    • Sass

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Button Group

    Lightning Design System

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Button Group

    Morningstar Design System

    Tech

    • Vue

    Features

    • Usage guidelines

  • Button container

    Mozilla Protocol

    Tech

    • Handlebars
    • Sass

    Features

    • Usage guidelines
    • Open source

  • Button group

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Button Group

    NextUI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Button group

    Nord Design System

    Tech

    • Web Components

    Features

    • Code examples
    • Usage guidelines

  • Button group

    Orbit

    Tech

    • React
    • CSS-in-JS

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Tone of voice

  • Action list

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Button group

    Polaris

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

  • Page actions

    Polaris

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

  • Button Group

    Porsche Design System

    Tech

    • Web Components
    • Angular
    • React
    • Vue

    Features

    • Code examples
    • Open source

  • Action bar

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Button group

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Button Group

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Group

    Reakit

    Tech

    • React

    Features

    • Code examples
    • Open source
    • Accessibility

  • Button Group

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Button Group

    Seek style guide

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Toggle Group

    shadcn/ui

    Tech

    • React
    • Tailwind CSS

    Features

    • Code examples
    • Open source

  • Button group

    Shoelace

    Tech

    • Web Components

    Features

    • Code examples
    • Open source

  • Action group

    Spectrum

    Tech

    • CSS
    • Web Components
    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Button group

    Spectrum

    Tech

    • CSS
    • Web Components
    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Button Group

    Stacks

    Tech

    • Stimulus

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice
    • Open source

  • Button Row

    Thumbprint

    Tech

    • React
    • Sass

    Features

    • Code examples
    • Open source

  • Action Bar

    Workday Canvas Design System

    Tech

    • React

    Features

    • 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.

Related components

  • Button

    Buttons trigger an action such as submitting a form or showing/hiding an interface component.

Name distribution