import { StoryWithControls } from '../../../src/components/StorybookWrapper';

ButtonGroup

ButtonGroup is a container that groups multiple Button components together with consistent spacing and styling.

Live Example

<StoryWithControls component="ButtonGroup" props={{ expand: false }} controls={[ { name: "expand", label: "Expand", type: "boolean", description: "When true, buttons expand to fill available width." }, { name: "className", label: "Class Name", type: "text", description: "CSS class name for custom styling." } ]} sampleChildren={[{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 1"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 2"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 3"}}]} />

Try It

Edit the code below to experiment with the component:

function Demo() {
  return (
    <ButtonGroup>
      <Button buttonStyle="tertiary">Button 1</Button>
      <Button buttonStyle="tertiary">Button 2</Button>
      <Button buttonStyle="tertiary">Button 3</Button>
    </ButtonGroup>
  );
}

Props

Import

import { ButtonGroup } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::