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" density-emphasis="primary">
        Left
      </Button>
      <Button type="button">Center</Button>
      <Button type="button">Right</Button>
    </ButtonGroup>
  );
}

Props

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