RadCN
Inputsreadycomponentready

Toggle

A native pressed-state button for icon, text, disabled, size, and outline toggle actions.

Importimport { Toggle } from 'radcn/toggle'
Preview

Live package example

Render the six plain shadcn Toggle examples with native button semantics and app-owned icon presentation.

Example Parity

Render the six plain shadcn Toggle examples with native button semantics and app-owned icon presentation.

Preview
import { Toggle } from 'radcn/toggle'

function Icon({ label, color }: { label: string; color?: string }) {
  return (
    <span
      aria-hidden="true"
      class="radcn-toggle-icon inline-grid w-[var(--radcn-toggle-icon-size,1rem)] h-[var(--radcn-toggle-icon-size,1rem)] flex-none place-items-center text-[var(--radcn-toggle-icon-fg,currentColor)] font-semibold text-[0.6875rem] leading-none [font-family:var(--radcn-font)] transition-[color,transform] duration-[120ms]"
      style={color ? `--radcn-toggle-icon-on-fg:${color}` : undefined}
    >
      {label}
    </span>
  )
}

export function TogglePreview() {
  return (
    <div class="toggle-preview">
      <Toggle
        ariaLabel="Toggle bookmark"
        class="bookmark-toggle"
        size="sm"
        variant="outline"
      >
        <Icon label="B" color="#3b82f6" />
        Bookmark
      </Toggle>

      <Toggle ariaLabel="Toggle italic" disabled><Icon label="U" /></Toggle>
      <Toggle ariaLabel="Toggle italic" size="lg"><Icon label="I" /></Toggle>
      <Toggle ariaLabel="Toggle italic" variant="outline"><Icon label="I" /></Toggle>
      <Toggle ariaLabel="Toggle italic" size="sm"><Icon label="I" /></Toggle>
      <Toggle ariaLabel="Toggle italic"><Icon label="I" /> Italic</Toggle>
    </div>
	  )
	}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Toggle } from 'radcn/toggle'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Toggle renders a native button with aria-pressed and data-state so pressed state is visible in server HTML and browser-enhanced DOM.
  • Icon-only toggles use ariaLabel for an accessible name while app-owned icon spans stay aria-hidden.
  • Disabled toggles use the native disabled attribute plus aria-disabled and data-disabled hooks.
  • Icon plus text examples keep visible text in the button content so the action remains understandable without icon assets.

Customization

  • Use size="sm" and size="lg" for shadcn-style compact and large toggle buttons.
  • Use variant="outline" for border styling without adding a wrapper or dependency.
  • Selected-state icon styling can target data-state="on" and the app-owned radcn-toggle-icon hook.
  • Icons are app presentation. Use spans, inline SVG, or any app icon system without changing radcn/toggle.

Remix 3 Notes

  • Radix Toggle maps to RadCN native button markup plus explicit enhanceToggle browser behavior.
  • lucide icons are not RadCN package dependencies; examples use decorative app-owned glyph spans.
  • Tailwind selected-state utilities map to data-state, class hooks, inline styles, and CSS variables.
  • Toggle owns pressed button behavior but does not own icon packages, bookmark state persistence, editor formatting state, or ToggleGroup selection.