Density

Toggle

Toggle wraps Base UI’s toggle button with Density’s shared control attributes.

import { useState } from "react";
import { Toggle } from "density-base-ui";
import { Star } from "lucide-react";

export default function ToggleExample() {
  const [pressed, setPressed] = useState(false);

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <Star
        aria-hidden="true"
        fill={pressed ? "currentColor" : "none"}
        size={16}
        strokeWidth={1.75}
      />
      {pressed ? "Unstar" : "Star"}
    </Toggle>
  );
}

Emphasis

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

function EmphasisToggle({
  emphasis,
  children,
}: Pick<ComponentProps<typeof Toggle>, "emphasis" | "children">) {
  const [pressed, setPressed] = useState(true);

  return (
    <Toggle emphasis={emphasis} onPressedChange={setPressed} pressed={pressed}>
      {children}
    </Toggle>
  );
}

export default function ToggleEmphasisExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <EmphasisToggle emphasis="primary">Primary</EmphasisToggle>
      <EmphasisToggle emphasis="secondary">Secondary</EmphasisToggle>
      <EmphasisToggle emphasis="outline">Outline</EmphasisToggle>
      <EmphasisToggle emphasis="ghost-primary">Ghost primary</EmphasisToggle>
      <EmphasisToggle emphasis="ghost-secondary">
        Ghost secondary
      </EmphasisToggle>
      <EmphasisToggle emphasis="ghost-tertiary">Ghost tertiary</EmphasisToggle>
    </View>
  );
}

Size

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

function SizeToggle({ size }: { size: ComponentProps<typeof Toggle>["size"] }) {
  const [pressed, setPressed] = useState(true);

  return (
    <Toggle onPressedChange={setPressed} pressed={pressed} size={size}>
      {size}
    </Toggle>
  );
}

export default function ToggleSizeExample() {
  return (
    <View align="center" orientation="horizontal" padding={false} wrap>
      <SizeToggle size="2xs" />
      <SizeToggle size="xs" />
      <SizeToggle size="sm" />
      <SizeToggle size="md" />
      <SizeToggle size="lg" />
      <SizeToggle size="xl" />
      <SizeToggle size="2xl" />
      <SizeToggle size="3xl" />
    </View>
  );
}