ToggleButton

Open in Playground

ToggleButton is a button that stays pressed (aria-pressed), shown as a filled button. On its own, use selected and onChange. Put several in a ToggleButtonGroup and give each a value: by default any number can be pressed (value is an array), and with exclusive at most one (value is a string, or null when none is). Controlled with value + onChange, or uncontrolled with defaultValue.

The group takes the same layout props as ButtonGroup.

bold; aligned left

Props

ToggleButton

  • valuestring

    Identifies the button inside a ToggleButtonGroup.

  • selectedboolean
    Default: false

    Pressed state when used on its own.

  • onChange(selected: boolean) => void

    Receives the new pressed state when used on its own.

  • onClick(event) => void

    Click handler.

  • childrenReactNode

    Content.

  • ...rest

    Any other props are passed to the underlying element.

ToggleButtonGroup

  • valuestring | string[] | null

    Pressed value(s): a string or null with exclusive, an array otherwise.

  • defaultValuestring | string[] | null

    Initial value when uncontrolled.

  • onChange(value) => void

    Receives the new value (a string or null with exclusive, an array otherwise).

  • exclusiveboolean
    Default: false

    Allow at most one pressed button.

  • orientation'horizontal' | 'vertical'
    Default: 'horizontal'

    Row or column (from ButtonGroup).

  • ...ButtonGroup

    attached, fullWidth, aria-label and the other ButtonGroup props.

  • childrenReactNode

    Content.