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

ariaLabel string

Accessible label.

children Array<Node> required

Set of more than one Button components

ArrayNode

disabled boolean = false

Defines if the button group is disabled.

mode $Values<typeof MODE>

Use the mode prop to render toggleable Buttons: the value radio will cause Buttons to behave like radio buttons, the value checkbox will cause Buttons to behave like checkboxes.

$ValuesObject.freeze({ radio: "radio", checkbox: "checkbox" })

onClick function = () => undefined

Called with click events from children. If a child button has its own click handler, the local handler will be called first, then this handler will trigger.

function
SyntheticEventHTMLButtonElement,
number
=> mixed

overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<*>

{ Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }*

selected union

Index or array of indices of the selected Button(s). Primarily for use with controlled components with a mode prop defined.

One of
number,
Arraynumber

shape $Values<typeof SHAPE> =

Defines the shape of the buttons in the button group.

$Values{ default: "default", round: "round", square: "square" }

size $Values<typeof SIZE> =

Defines the size of the buttons in the button group.

$Values{ default: "default", compact: "compact", large: "large" }

Stateful ButtonGroup API

Stateful Container API

... $Diff<object, object> required

$Diff
ariaLabel string
children required ArrayNode
disabled boolean
mode $ValuesObject.freeze({ radio: "radio", checkbox: "checkbox" })
onClick function
SyntheticEventHTMLButtonElement,
number
=> mixed
overrides { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }*
selected union One of
number,
Arraynumber
shape $Values{ default: "default", round: "round", square: "square" }
size $Values{ default: "default", compact: "compact", large: "large" }
initialState object
selected union required One of
number,
Arraynumber
stateReducer function
$ValuesObject.freeze({ change: "change" }),
selected required Arraynumber
,
selected required Arraynumber
=>
selected required Arraynumber
,
selected mixed required

children function required

...$Diff<{ ariaLabel: string, children: Array<Node>, disabled: boolean, mode: $Values<typeof MODE>, onClick: (SyntheticEvent<HTMLButtonElement>, number) => mixed, overrides: { Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<*>, selected: number | Array<number>, shape: $Values<typeof SHAPE>, size: $Values<typeof SIZE> }, { children: mixed }>
onClick required function
SyntheticEventHTMLButtonElement,
number
=> mixed
selected union required One of
number,
Arraynumber
 => Node