Density

ToggleGroup

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

import { useState } from "react";
import { Toggle, ToggleGroup } from "density-base-ui";
import { Grid2X2, List } from "lucide-react";

export default function ToggleGroupExample() {
  const [value, setValue] = useState(["list"]);

  return (
    <ToggleGroup
      value={value}
      onValueChange={setValue}
      aria-label="View layout"
    >
      <Toggle value="list" aria-label="List view">
        <List aria-hidden="true" size={16} strokeWidth={1.75} />
      </Toggle>
      <Toggle value="grid" aria-label="Grid view">
        <Grid2X2 aria-hidden="true" size={16} strokeWidth={1.75} />
      </Toggle>
    </ToggleGroup>
  );
}

Props

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

Size

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

export default function ToggleGroupSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <ToggleGroup size="2xs" value={["day"]} aria-label="2xs range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="xs" value={["day"]} aria-label="xs range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="sm" value={["day"]} aria-label="sm range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="md" value={["day"]} aria-label="md range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="lg" value={["day"]} aria-label="lg range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="xl" value={["day"]} aria-label="xl range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="2xl" value={["day"]} aria-label="2xl range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
      <ToggleGroup size="3xl" value={["day"]} aria-label="3xl range">
        <Toggle value="day">Day</Toggle>
        <Toggle value="week">Week</Toggle>
      </ToggleGroup>
    </div>
  );
}