Basic
Use a toggle for a single independent on/off action such as saving, starring, or muting.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Toggle
Two-state button primitive with pressed state, variants, sizing, icons, labels, and reactive forms support.
02 Usage
TS
import { FrToggleModule } from '@frame-ui-ng/components/toggle';HTML
<button frToggle>
<span frToggleLabel>Toggle</span>
</button>03 Examples
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.
Reactive form value: enabled
RTL
Toggle spacing is logical, so icon and label rhythm follows the document direction.
04 Custom Styling
Override toggle tokens on an individual control or a toolbar wrapper to tune selected states, border treatment, sizing, and motion.
05 Token Inspector
Hover the toggle root, pressed state, outline variant, icon, or label to inspect the tokens that shape the control.
06 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);
--frame-toggle-font-size: 0.875rem;
--frame-toggle-font-weight: 600;
--frame-toggle-bg: transparent;
--frame-toggle-color: var(--frame-foreground);
--frame-toggle-border: transparent;
--frame-toggle-hover-bg: var(--frame-muted);
--frame-toggle-hover-color: var(--frame-foreground);
--frame-toggle-pressed-bg: var(--frame-accent, var(--frame-muted));
--frame-toggle-pressed-color: var(--frame-accent-foreground, var(--frame-foreground));
--frame-toggle-pressed-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
--frame-toggle-outline-bg: var(--frame-background);
--frame-toggle-outline-border: var(--frame-border);
--frame-toggle-outline-hover-bg: var(--frame-muted);
--frame-toggle-outline-pressed-bg: var(--frame-muted);
--frame-toggle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
--frame-toggle-disabled-opacity: 0.5;
--frame-toggle-transition-duration: 160ms;
--frame-toggle-icon-size: 1rem;