ButtonGroup

How to get ButtonGroup

import { ButtonGroup } from 'fds/components';

Type: Component

A group of buttons. A buttons presented in a ButtonGroup can be selected, which will cause this button to be selected. Only one of the buttons can be selected at a time.

Keyboard behavior:

  • Enter: call the onItemClick prop of the focused button.

Props

# Name Type Description
1. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
2. [isFullWidth] Boolean

Whether or not the component grows to the full available width.

  Default value
false
3. items Array<ItemWithLabelAndIconAndIsDisabled>
  ItemWithLabelAndIconAndIsDisabled

Type: Object

An item with a property with a string value to display and a property to hold the actual value.

Properties

Name Type Description
icon String

The name of the icon, displayed by the component as needed.

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

isDisabled Boolean

Whether or not the component should be rendered in a disabled state.

Whether or not the component should be rendered in a disabled state.

label String

The human readable label for the item, displayed by the component as needed.

The human readable label displayed in the component.

4. onItemClick Function

A callback that is called whenever a rendered item is clicked and is not in a disabled state.


  Arguments
# Name Type Description
1. item Object

The clicked item.

5. [selectedItem] Object

The item that is visually presented in a selected state. Expects an item in the same shape as expected by the "items" property.

  Default value
null
Was this page helpful?