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

Size

import { useState, type ComponentProps } from "react";
import { Toggle, ToggleGroup, View } from "density-base-ui";

function SizeToggleGroup({
  size,
}: {
  size: ComponentProps<typeof ToggleGroup>["size"];
}) {
  const [value, setValue] = useState(["day"]);

  return (
    <ToggleGroup
      aria-label={`${size} range`}
      onValueChange={setValue}
      size={size}
      value={value}
    >
      <Toggle value="day">Day</Toggle>
      <Toggle value="week">Week</Toggle>
    </ToggleGroup>
  );
}

export default function ToggleGroupSizeExample() {
  return (
    <View>
      <SizeToggleGroup size="2xs" />
      <SizeToggleGroup size="xs" />
      <SizeToggleGroup size="sm" />
      <SizeToggleGroup size="md" />
      <SizeToggleGroup size="lg" />
      <SizeToggleGroup size="xl" />
      <SizeToggleGroup size="2xl" />
      <SizeToggleGroup size="3xl" />
    </View>
  );
}