www/docs/components/button-group.mdx
import ButtonGroupBasic from '!!raw-loader!../examples/ButtonGroup/Basic'; import ButtonGroupNested from '!!raw-loader!../examples/ButtonGroup/Nested'; import ButtonGroupSizes from '!!raw-loader!../examples/ButtonGroup/Sizes'; import ButtonToolbar from '!!raw-loader!../examples/ButtonGroup/Toolbar'; import ButtonToolbarBasic from '!!raw-loader!../examples/ButtonGroup/ToolbarBasic'; import ButtonGroupVertical from '!!raw-loader!../examples/ButtonGroup/Vertical';
Wrap a series of <Button>s in a <ButtonGroup>.
Combine sets of <ButtonGroup>s into a <ButtonToolbar> for more complex components.
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
<CodeBlock language="jsx" live> {ButtonToolbar} </CodeBlock>Instead of applying button sizing props to every button in a group, just
add size prop to the <ButtonGroup>.
You can place other button types within the
<ButtonGroup> like <DropdownButton>s.
Make a set of buttons appear vertically stacked rather than
horizontally, by adding vertical to the <ButtonGroup>.
Split button dropdowns are not supported here.