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 "@renderlesskit/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>

Collapsed

ButtonGroup Styles

Buttons can be grouped together using collapsed prop.

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

render(

<div className="flex flex-col space-y-2">
  <ButtonGroupBasic size="md" collapsed={true} />
  <ButtonGroupBasic size="md" />
</div>
)

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

render(

<div className="flex flex-col space-y-2">
  <ButtonGroupBasic size="md" collapsed={true} />
  <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

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

render(

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

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

render(

<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

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

render(

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

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

render(

<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
`collapsed`	`boolean`	`false`
`size`	`union`	`md`
`variant`	`union`	`solid`

Last updated on July 18, 2022

ButtonGroup

Imports#

Usage#

ButtonGroup Styles#

ButtonGroup sizes#

ButtonGroup variants#

API Reference#

Imports

Usage

ButtonGroup Styles

ButtonGroup sizes

ButtonGroup variants

API Reference