Primitive / Atombeta

Toggle

A two-state button that can be pressed on or off.

Edit on GitHub

pnpm dlx @glinui/cli@latest add toggle

Weekly digest: three launches, one deprecation and a new way to schedule deploys.

Installation

Install from

pnpm dlx @glinui/cli@latest add toggle

Prefer the package?

Usage

Variants

Each variant in the pressed state.

import { Toggle } from "@glinui/ui"
import { TextB } from "@phosphor-icons/react"


export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Toggle variant="glinr" defaultPressed aria-label="glinr"><TextB /></Toggle>
      <Toggle variant="solid" defaultPressed aria-label="solid"><TextB /></Toggle>
      <Toggle variant="plain" defaultPressed aria-label="plain"><TextB /></Toggle>
      <Toggle variant="soft" defaultPressed aria-label="soft"><TextB /></Toggle>
      <Toggle variant="outline" defaultPressed aria-label="outline"><TextB /></Toggle>
      <Toggle variant="ghost" defaultPressed aria-label="ghost"><TextB /></Toggle>
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { Toggle } from "@glinui/ui"
import { TextUnderline } from "@phosphor-icons/react"


export function Demo() {
  return (
    <Toggle variant="glass" size="lg" defaultPressed aria-label="Underline">
      <TextUnderline />
    </Toggle>
  )
}

State matrix

import { Toggle } from "@glinui/ui"
import { TextB } from "@phosphor-icons/react"


export function Demo() {
  return (
    <div className="grid grid-cols-3 gap-3">
      {(["sm", "md", "lg"] as const).map((size) => (
        <div key={size} className="flex flex-col gap-2">
          <Toggle size={size} aria-label="Off"><TextB /></Toggle>
          <Toggle size={size} defaultPressed aria-label="On"><TextB /></Toggle>
          <Toggle size={size} disabled aria-label="Disabled"><TextB /></Toggle>
          <Toggle size={size} disabled defaultPressed aria-label="Disabled on"><TextB /></Toggle>
        </div>
      ))}
    </div>
  )
}

Accessibility

Renders a native button with `aria-pressed`.
Icon-only toggles need an `aria-label`.
Visible violet focus ring on `:focus-visible`.

Keyboard Interactions

Key	Action
`Enter / Space`	Toggle the pressed state.
`Tab`	Move focus to the toggle.

ARIA Attributes

`aria-pressed` reflects state
`data-state="on|off"` for styling

Reduced Motion

Colour transitions are removed under prefers-reduced-motion.

Affected properties

background-colorborder-color

API Reference

Prop	Type	Required	Default	Description
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Look. Omit to follow the ambient design style: glinr is a raised key that presses in when on, plain is the flat shadcn toggle. Glass is opt-in.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Height scale (h-8, h-9, h-10).
`pressed`	`boolean`	-	`-`	Controlled pressed state.
`defaultPressed`	`boolean`	-	`false`	Initial pressed state for uncontrolled use.
`onPressedChange`	`(pressed: boolean) => void`	-	`-`	Fires when the pressed state changes.
`disabled`	`boolean`	-	`false`	Disables interaction.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Toggle } from "@glinui/ui"

Source Files

toggle.tsx

toggle.test.tsxtest

Dependencies

@glinui/ui@radix-ui/react-toggleclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/toggle.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ToggleProps

`ToggleProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from toggleVariants.
`variant`	`ControlVariantProp`	No	`-`	Surface look. Omit to follow the ambient design style (glinr = raised key that presses in when on). Also: solid, plain, soft, outline, ghost, glass (opt-in).