ButtonGroup

Groups a collection of similar actions together.

When to use

  • If you need to emphasize context of similar actions.
  • If a single option or multiple options of the set may be selected.

Button group basic usage



Button group with radio mode

Button group with checkbox mode

Button group with disabled buttons

All disabled

Single disabled

Button group controlled example

Lorem ipsum dolor sit amet, ea insolens deseruisse mnesarchum mea. An munere utroque mentitum vis, ea rebum inani iudicabit has. Cu his dolorum perpetua. Mea atqui tation partem ne, ei vim etiam volumus nominavi. Cum id atqui cotidieque, quaeque nostrum salutandi cum at, idque scaevola platonem mei ad.
The Bold option has been selected 0 times

Button group with dropdown

Overrides

Additionally, you can fully customize any part of the ButtonGroup through the overrides prop. The ButtonGroup consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

ButtonGroup API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful ButtonGroup API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Container API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>