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

Props

Prop Attribute Values Default
presentation data-dn-presentation button button
label None React node None
hint None React node None
fieldOrientation None vertical, horizontal vertical
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other props Mixed Base UI toggle props None

Label and hint

Pinned in project switchers.
import { Toggle } from "density-base-ui";
export default function ToggleFieldExample() {
  return (
    <Toggle
      pressed
      label="Project shortcut"
      hint="Pinned in project switchers."
    >
      Starred
    </Toggle>
  );
}

Field orientation

import { Toggle } from "density-base-ui";
export default function ToggleFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <Toggle pressed fieldOrientation="vertical" label="Vertical">
        Starred
      </Toggle>
      <Toggle pressed fieldOrientation="horizontal" label="Horizontal">
        Starred
      </Toggle>
    </div>
  );
}

Emphasis

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

export default function ToggleEmphasisExample() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
      <Toggle pressed emphasis="primary">
        Primary
      </Toggle>
      <Toggle pressed emphasis="secondary">
        Secondary
      </Toggle>
      <Toggle pressed emphasis="outline">
        Outline
      </Toggle>
      <Toggle pressed emphasis="ghost">
        Ghost
      </Toggle>
    </div>
  );
}

Size

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

export default function ToggleSizeExample() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        flexWrap: "wrap",
        gap: "0.75rem",
      }}
    >
      <Toggle pressed size="2xs">
        2xs
      </Toggle>
      <Toggle pressed size="xs">
        xs
      </Toggle>
      <Toggle pressed size="sm">
        sm
      </Toggle>
      <Toggle pressed size="md">
        md
      </Toggle>
      <Toggle pressed size="lg">
        lg
      </Toggle>
      <Toggle pressed size="xl">
        xl
      </Toggle>
      <Toggle pressed size="2xl">
        2xl
      </Toggle>
      <Toggle pressed size="3xl">
        3xl
      </Toggle>
    </div>
  );
}