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

Color

Set color on the group to scope every direct clickable item, or set it on an individual button.

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

export default function ButtonGroupColorExample() {
  return (
    <View padding={false}>
      <ButtonGroup aria-label="Publish actions" color="success">
        <Button type="button">Preview</Button>
        <Button type="button">Publish</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Risk actions" color="warning">
        <Button type="button">Pause</Button>
        <Button type="button">Escalate</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Delete actions" color="destructive">
        <Button type="button">Archive</Button>
        <Button type="button">Delete</Button>
      </ButtonGroup>
    </View>
  );
}

Emphasis

Set emphasis on each button in the group.

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

export default function ButtonGroupEmphasisExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <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-primary">Left</Button>
        <Button emphasis="ghost-primary">Center</Button>
        <Button emphasis="ghost-primary">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Ghost secondary text alignment">
        <Button emphasis="ghost-secondary">Left</Button>
        <Button emphasis="ghost-secondary">Center</Button>
        <Button emphasis="ghost-secondary">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Ghost tertiary text alignment">
        <Button emphasis="ghost-tertiary">Left</Button>
        <Button emphasis="ghost-tertiary">Center</Button>
        <Button emphasis="ghost-tertiary">Right</Button>
      </ButtonGroup>
    </View>
  );
}

Size

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

export default function ButtonGroupSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <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>
    </View>
  );
}

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