button-group.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

ButtonGroup

The ButtonGroup component can be used to group collection of buttons of same type to perform the a set of actions.

Imports

import { ButtonGroup } from "@adaptui/react-tailwind";

Usage

<InteractiveCodeblock children={({ spreadProps }) => <ButtonGroup ${spreadProps}> <Button>Undo</Button> <Button>Redo</Button> <Button>Copy</Button> <Button>Paste</Button> <Button>Delete</Button> <Button>Close</Button> </ButtonGroup>} themeProps={{ size: "button.size", variant: "button.themeColor.base", themeColor: "button.themeColor", }} />

ButtonGroup Styles

Buttons can be grouped together using type prop.

import { Button, ButtonGroup } from "@adaptui/react-tailwind";

export const App = props => {
  const ButtonGroupBasic = (props) => (
    <ButtonGroup {...props}>
      <Button>Undo</Button>
      <Button>Redo</Button>
      <Button>Copy</Button>
      <Button>Paste</Button>
      <Button>Delete</Button>
      <Button>Close</Button>
    </ButtonGroup>
  );

  return (
    <div className="flex flex-col space-y-2">
      <ButtonGroupBasic size="md" type="group" />
      <ButtonGroupBasic size="md" />
    </div>
  );
};

ButtonGroup sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Button, ButtonGroup } from "@adaptui/react-tailwind";

export const App = props => {
  const ButtonGroupBasic = props => {
    return (
      <ButtonGroup {...props}>
        <Button>Undo</Button>
        <Button>Redo</Button>
        <Button>Copy</Button>
        <Button>Paste</Button>
        <Button>Delete</Button>
        <Button>Close</Button>
      </ButtonGroup>
    );
  };

  return (
    <div className="flex flex-col space-y-2">
      <ButtonGroupBasic size="sm" />
      <ButtonGroupBasic size="md" />
      <ButtonGroupBasic size="lg" />
      <ButtonGroupBasic size="xl" />
    </div>
  );
};

ButtonGroup variants

Variants can be set using the variant prop. The default variant is solid. The available variants are: solid subtle outline ghost

import { Button, ButtonGroup } from "@adaptui/react-tailwind";

export const App = props => {
  const ButtonGroupBasic = props => {
    return (
      <ButtonGroup {...props}>
        <Button>Undo</Button>
        <Button>Redo</Button>
        <Button>Copy</Button>
        <Button>Paste</Button>
        <Button>Delete</Button>
        <Button>Close</Button>
      </ButtonGroup>
    );
  };

  return (
    <div className="flex flex-col space-y-2">
      <ButtonGroupBasic size="md" variant="solid" collapsed={true} />
      <ButtonGroupBasic size="md" variant="subtle" collapsed={true} />
      <ButtonGroupBasic size="md" variant="outline" collapsed={true} />
      <ButtonGroupBasic size="md" variant="ghost" collapsed={true} />
    </div>
  );
};

<Nextra.Callout> You can add extra variants & sizes via the theme file. Checkout theming guide. </Nextra.Callout>

API Reference

<PropsTable data={[ { name: "type", default: "collapsed", type: "collapsed | group", description: "Whether the button borders are collapsed or not.", }, { name: "size", default: "md", themeKey: "button.size", description: "Size of the button", }, { name: "variant", default: "solid", themeKey: "button.themeColor.base", description: "Variant of the button", }, ]} />