ButtonGroup

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

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

Usage


<ButtonGroup >
  <Button>Undo</Button>
  <Button>Redo</Button>
  <Button>Copy</Button>
  <Button>Paste</Button>
  <Button>Delete</Button>
  <Button>Close</Button>
</ButtonGroup>


<ButtonGroup >
  <Button>Undo</Button>
  <Button>Redo</Button>
  <Button>Copy</Button>
  <Button>Paste</Button>
  <Button>Delete</Button>
  <Button>Close</Button>
</ButtonGroup>

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>
  );
};

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>
  );
};

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>
  );
};

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>
  );
};

💡

You can add extra variants & sizes via the theme file. Checkout theming guide.

API Reference

Prop	Type	Default
`type`	`collapsed \| group`	`collapsed`
`size`	`union`	`md`
`variant`	`union`	`solid`

Last updated on July 26, 2022

ButtonGroup

Imports#

Usage#

ButtonGroup Styles#

ButtonGroup sizes#

ButtonGroup variants#

API Reference#

Imports

Usage

ButtonGroup Styles

ButtonGroup sizes

ButtonGroup variants

API Reference