Density

ToggleGroup

ToggleGroup wraps Base UI’s toggle group and applies Density size attributes to the group.

import { Toggle, ToggleGroup } from "density-base-ui";

export default function ToggleGroupExample() {
  return (
    <ToggleGroup defaultValue={["bold"]} aria-label="Text style">
      <Toggle value="bold">Bold</Toggle>
      <Toggle value="italic">Italic</Toggle>
      <Toggle value="code">Code</Toggle>
    </ToggleGroup>
  );
}

Props

Prop Attribute Values Default
density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other props Mixed Base UI toggle group props None