Klarhimmel UI
Klarhimmel ↗

Toggle

Stable

A button that stays pressed: bold, favourite, mute.

npx shadcn add @klarhimmel/toggle

When to use

  • Use for

    A tool or preference that stays on: bold, favourite, mute.

  • Not for

    A setting in a list. Use Switch. A choice submitted with a form. Use Checkbox.

  • Pairs with

    Icons, Toggle group, Tooltip.

Preview

toggle.tsx
import { Bold } from 'lucide-react';
import { Theme } from '@/components/klarhimmel/theme/style';
import { Toggle } from '@/components/klarhimmel/ui/toggle';

export default function Example() {
  return (
    <Theme theme="brand">
      <Toggle aria-label="Bold"><Bold aria-hidden /></Toggle>
    </Theme>
  );
}

Install

Import

import { Toggle } from '@/components/klarhimmel/ui/toggle';
Lands in
components/klarhimmel/ui/toggle.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • States

    On, off and unavailable.

    import { Italic } from 'lucide-react';
import { Toggle } from '@/components/klarhimmel/ui/toggle';

export default function ToggleStates() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Toggle aria-label="Italic, on" defaultPressed><Italic aria-hidden /></Toggle>
      <Toggle aria-label="Italic, off"><Italic aria-hidden /></Toggle>
      <Toggle aria-label="Italic, unavailable" disabled><Italic aria-hidden /></Toggle>
      <p className="text-kh-small text-kh-muted">On, off and unavailable.</p>
    </div>
  );
}

  • Toolbar

    Formatting for the room description.

    import { Bold, Italic, Underline } from 'lucide-react';
import { Toggle } from '@/components/klarhimmel/ui/toggle';

export default function ToggleToolbar() {
  return (
    <div className="flex flex-col items-start gap-2">
    <p className="text-kh-small text-kh-muted">Formatting for the room description.</p>
    <div role="group" aria-label="Text formatting" className="inline-flex items-center gap-1 rounded-kh-lg bg-kh-surface-2 p-1">
      <Toggle aria-label="Bold" className="border-0 shadow-none"><Bold aria-hidden /></Toggle>
      <Toggle aria-label="Italic" className="border-0 shadow-none" defaultPressed><Italic aria-hidden /></Toggle>
      <Toggle aria-label="Underline" className="border-0 shadow-none"><Underline aria-hidden /></Toggle>
    </div>
    </div>
  );
}

API reference

PropTypeDefaultDescription
pressed / onPressedChangeboolean / (pressed: boolean) => void-Controlled or uncontrolled state.
aria-labelstring-Required for an icon-only toggle.
disabledbooleanfalsePrevents interaction.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
Enter / SpacePresses or releases it
TabMoves focus

aria-pressed carries the state. An icon-only toggle needs an aria-label that stays the same when pressed.

Accessibility