Toggle

Two-state button primitive with pressed state, variants, sizing, icons, labels, and reactive forms support.

Preview

Usage

import { FrToggleModule } from '@frame-ui-ng/components/toggle';

HTML

<button frToggle>
  <span frToggleLabel>Toggle</span>
</button>

Examples

Basic

Use a toggle for a single independent on/off action such as saving, starring, or muting.

Outline

Use the outline variant when the toggle sits beside other bordered controls.

With Text

Project a label when the icon alone would be too ambiguous for the action.

Size

Choose small, default, or large sizing to match dense toolbars or larger action rows.

Disabled

Disabled toggles preserve their current state while blocking pointer and form interaction.

Controlled

Bind pressed and pressedChange when parent state should own the selected value.

Current value: on

Reactive Forms

Because FrToggle implements ControlValueAccessor, it can bind directly to a boolean FormControl.

Notifications

Reactive form value: enabled

RTL

Toggle spacing is logical, so icon and label rhythm follows the document direction.

Custom Styling

Override toggle tokens on an individual control or a toolbar wrapper to tune selected states, border treatment, sizing, and motion.

Token Inspector

Hover the toggle root, pressed state, outline variant, icon, or label to inspect the tokens that shape the control.

Design Tokens

Use these CSS custom properties to tune toggle sizing, surface states, focus ring, disabled state, icon sizing, and transition timing.

SCSS

--frame-toggle-height: 2.25rem;
--frame-toggle-padding-x: 0.75rem;
--frame-toggle-gap: 0.5rem;
--frame-toggle-radius: var(--frame-radius-md, 0.5rem);
--frame-toggle-font-size: 0.875rem;
--frame-toggle-font-weight: 600;
--frame-toggle-bg: transparent;
--frame-toggle-color: var(--frame-foreground, #09090b);
--frame-toggle-border: transparent;
--frame-toggle-hover-bg: var(--frame-muted, #f4f4f5);
--frame-toggle-hover-color: var(--frame-foreground, #09090b);
--frame-toggle-pressed-bg: var(--frame-accent, var(--frame-muted, #f4f4f5));
--frame-toggle-pressed-color: var(--frame-accent-foreground, var(--frame-foreground, #09090b));
--frame-toggle-pressed-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
--frame-toggle-outline-bg: var(--frame-background, #fff);
--frame-toggle-outline-border: var(--frame-border, #e5e7eb);
--frame-toggle-outline-hover-bg: var(--frame-muted, #f4f4f5);
--frame-toggle-outline-pressed-bg: var(--frame-muted, #f4f4f5);
--frame-toggle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring, #18181b) 28%, transparent);
--frame-toggle-disabled-opacity: 0.5;
--frame-toggle-transition-duration: 160ms;
--frame-toggle-icon-size: 1rem;