Button group

A ButtonGroup joins related buttons into one control. Props set on the group, such as variant and size, apply to every button in it.

Usage#

import { Button, ButtonGroup } from "@clawscale/react";

<ButtonGroup>
  <Button text="Edit" />
  <Button text="Duplicate" />
</ButtonGroup>

Examples#

Basic#

Wrap buttons in a ButtonGroup to join them in a row.

core/button-group/basic.tsx

import { Button, ButtonGroup } from "@clawscale/react";

export default function ButtonGroupBasic() {
  return (
    <ButtonGroup>
      <Button icon="play" text="Run" />
      <Button icon="pause" text="Pause" />
      <Button icon="stop" text="Stop" />
    </ButtonGroup>
  );
}

Variant#

variant styles every button in the group: solid (default), outlined or minimal. A button cannot override it.

core/button-group/variant.tsx

import { Button, ButtonGroup } from "@clawscale/react";

export default function ButtonGroupVariant() {
  return (
    <>
      <ButtonGroup>
        <Button text="Day" />
        <Button active text="Week" />
        <Button text="Month" />
      </ButtonGroup>
      <ButtonGroup variant="outlined">
        <Button text="Day" />
        <Button active text="Week" />
        <Button text="Month" />
      </ButtonGroup>
      <ButtonGroup variant="minimal">
        <Button text="Day" />
        <Button active text="Week" />
        <Button text="Month" />
      </ButtonGroup>
    </>
  );
}

Vertical#

vertical stacks the buttons. They take the width of the widest one, and alignText lines up their content.

core/button-group/vertical.tsx

import { Button, ButtonGroup } from "@clawscale/react";

export default function ButtonGroupVertical() {
  return (
    <ButtonGroup vertical alignText="start">
      <Button icon="database" text="Datasets" />
      <Button icon="flow-linear" text="Pipelines" />
      <Button icon="dashboard" text="Dashboards" />
      <Button icon="cog" text="Settings" />
    </ButtonGroup>
  );
}

Fill#

fill stretches the group to its container and shares the space between buttons. Add Classes.FIXED to a button to keep its natural width.

core/button-group/fill.tsx

import { Button, ButtonGroup, Classes } from "@clawscale/react";

export default function ButtonGroupFill() {
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <ButtonGroup fill>
        <Button icon="th" text="Table" />
        <Button icon="timeline-line-chart" text="Chart" />
        <Button icon="map" text="Map" />
        <Button className={Classes.FIXED} icon="more" aria-label="More views" />
      </ButtonGroup>
    </div>
  );
}

Icons with tooltips#

Icon-only buttons make a compact toolbar. Give each one an aria-label and wrap it in a Tooltip to name it on hover.

core/button-group/tooltips.tsx

import { Button, ButtonGroup, Tooltip } from "@clawscale/react";

export default function ButtonGroupTooltips() {
  return (
    <ButtonGroup>
      <Tooltip content="Zoom in">
        <Button icon="zoom-in" aria-label="Zoom in" />
      </Tooltip>
      <Tooltip content="Zoom out">
        <Button icon="zoom-out" aria-label="Zoom out" />
      </Tooltip>
      <Tooltip content="Fit to data">
        <Button icon="zoom-to-fit" aria-label="Fit to data" />
      </Tooltip>
      <Tooltip content="Export as CSV">
        <Button icon="download" aria-label="Export as CSV" />
      </Tooltip>
    </ButtonGroup>
  );
}

Interactive playground#

Props

FillVertical

Variant

Align text

Size

View source on GitHub

Props interface#

ButtonGroup also accepts the HTML attributes of a div.

interface ButtonGroupProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement>@clawscale/react

Props	Description
`alignText`	`Alignment` Text alignment within button. By default, icons and text will be centered within the button. Passing `"start"` or `"end"` will align the button text to that side and push `icon` and `endIcon` to either edge. Passing `"center"` will center the text and icons together.
`children`required	`React.ReactNode` Buttons in this group.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`fill`	`boolean` = `false` Whether the button group should take up the full width of its container.
`large`deprecated	`boolean` = `false` Whether the child buttons should appear with large styling. use `size="large"` instead.
`minimal`deprecated	`boolean` = `false` Whether the child buttons should appear with minimal styling. use `variant="minimal"` instead
`outlined`deprecated	`boolean` = `false` Whether the child buttons should use outlined styles. use `variant="outlined"` instead
`size`	`Size` = `"medium"` The size of the child buttons.
`variant`	`ButtonVariant` = `"solid"` Visual style variant for the child buttons.
`vertical`	`boolean` = `false` Whether the button group should appear with vertical styling.