Density

ButtonGroup

ButtonGroup groups related button controls and applies Density size attributes to the group.

import { Button, ButtonGroup } from "density-base-ui";

export default function ButtonGroupExample() {
  return (
    <ButtonGroup aria-label="Text alignment">
      <Button type="button">Left</Button>
      <Button type="button">Center</Button>
      <Button type="button">Right</Button>
    </ButtonGroup>
  );
}

Props

Prop Attribute Values Default
presentation data-dn-presentation button-group button-group
role role HTML role group
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other container props Mixed HTML div props None

Emphasis

Set emphasis on each button in the group.

import { Button, ButtonGroup } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ButtonGroupEmphasisExample() {
  return (
    <ExampleStack>
      <ButtonGroup aria-label="Primary text alignment">
        <Button emphasis="primary">Left</Button>
        <Button emphasis="primary">Center</Button>
        <Button emphasis="primary">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Secondary text alignment">
        <Button emphasis="secondary">Left</Button>
        <Button emphasis="secondary">Center</Button>
        <Button emphasis="secondary">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Outline text alignment">
        <Button emphasis="outline">Left</Button>
        <Button emphasis="outline">Center</Button>
        <Button emphasis="outline">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Ghost text alignment">
        <Button emphasis="ghost">Left</Button>
        <Button emphasis="ghost">Center</Button>
        <Button emphasis="ghost">Right</Button>
      </ButtonGroup>
    </ExampleStack>
  );
}

Size

import { Button, ButtonGroup } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ButtonGroupSizeExample() {
  return (
    <ExampleStack>
      <ButtonGroup size="2xs">
        <Button>2xs</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="xs">
        <Button>xs</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="sm">
        <Button>sm</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="md">
        <Button>md</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="lg">
        <Button>lg</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="xl">
        <Button>xl</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="2xl">
        <Button>2xl</Button>
        <Button>Group</Button>
      </ButtonGroup>
      <ButtonGroup size="3xl">
        <Button>3xl</Button>
        <Button>Group</Button>
      </ButtonGroup>
    </ExampleStack>
  );
}

Icons only

Use square buttons with accessible labels for icon-only button groups.

import { Button, ButtonGroup } from "density-base-ui";
import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";

export default function ButtonGroupIconExample() {
  return (
    <ButtonGroup aria-label="Text alignment">
      <Button square aria-label="Align left">
        <AlignLeft aria-hidden="true" size={16} strokeWidth={1.75} />
      </Button>
      <Button square aria-label="Align center">
        <AlignCenter aria-hidden="true" size={16} strokeWidth={1.75} />
      </Button>
      <Button square aria-label="Align right">
        <AlignRight aria-hidden="true" size={16} strokeWidth={1.75} />
      </Button>
    </ButtonGroup>
  );
}