Button Group

Button groups allow you to group buttons together on a single line.

Basic Example

You can create button groups using the ButtonGroup component.

import React from "react";
import { Button, ButtonGroup } from "shards-react";

export default function ButtonGroupExample() {
  return (
    <ButtonGroup>
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  );
}

Button Group Size

The button group's size can be controlled via the size prop. The button group can be normal (default), small or large.

import React from "react";
import { Button, ButtonGroup } from "shards-react";

export default function SizeButtonGroupExample() {
  return (
    <div className="example">
      <ButtonGroup size="lg" className="mr-2">
        <Button>Large</Button>
        <Button>Large</Button>
      </ButtonGroup>

      <ButtonGroup className="mr-2">
        <Button>Normal</Button>
        <Button>Normal</Button>
      </ButtonGroup>

      <ButtonGroup size="sm" className="mr-2">
        <Button>Small</Button>
        <Button>Small</Button>
      </ButtonGroup>
    </div>
  );
}

Vertical Button Groups

You can stack button groups vertically using the vertical prop.

import React from "react";
import { Button, ButtonGroup } from "shards-react";

export default function VerticalButtonGroupExample() {
  return (
    <ButtonGroup vertical>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </ButtonGroup>
  );
}

Props

The following props are available for the Button Group component.

Prop	Description	Type	Default	Required
children	The children nodes.	`Node`	-	No
className	The class name.	`String`	-	No
size	The size.	`String`	-	No
vertical	Whether it is vertical, or not.	`Bool`	-	No