Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
121 lines (92 sloc) 3.71 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Basic from 'examples/button-group/basic.js'; import Icon from 'examples/button-group/icon.js'; import Enhancer from 'examples/button-group/enhancer.js'; import RadioMode from 'examples/button-group/radio-mode.js'; import CheckboxMode from 'examples/button-group/checkbox-mode.js'; import Disabled from 'examples/button-group/disabled.js'; import DisabledButton from 'examples/button-group/disabled-button.js'; import Dropdown from 'examples/button-group/dropdown.js'; import StatefulRadio from 'examples/button-group/stateful-radio.js'; import StatefulCheckbox from 'examples/button-group/stateful-checkbox.js';

import Overrides from '../../components/overrides'; import {Button} from 'baseui/button'; import {ButtonGroup} from 'baseui/button-group'; import * as ButtonGroupExports from 'baseui/button-group';

export default Layout;

Button Group

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.

In radio mode, the button group functions similarly to a radio group. Only one button can be "selected" at a time.

In checkbox mode, the button group functions similarly to a group of checkboxes. Multiple buttons can be "selected" at the same time.

You can disable the entire button group as in the example above. Or you can disable isolated buttons as in the example below.

<Example title="Stateful (uncontrolled) with radio mode" path="button-group/stateful-radio.js"

As with many of our components, there is also an uncontrolled version, StatefulButtonGroup, which manages its own state. If mode is set to radio or checkbox, this stateful version of the component will adapt to keep track of the selected value(s).

<Example title="Stateful (uncontrolled) with checkbox mode" path="button-group/stateful-checkbox.js"


<Overrides name="ButtonGroup" component={ButtonGroupExports} renderExample={props => ( Label Label Label )} />

<API heading="ButtonGroup API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/button-group/button-group.js')} />

<API heading="StatefulButtonGroup API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/button-group/stateful-button-group.js')} />

<API heading="StatefulContainer API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/button-group/stateful-container.js')} />

You can’t perform that action at this time.