Components / Toggle

Toggle

A native pressed-state button with controlled state, variants and sizes.

example.component.html

html

<button aevkoToggle [(pressed)]="bold" aria-label="Bold">
  Bold
</button>

Installation

npx aevko-ui@latest add toggle --yes

Source ownership

Bind pressed for controlled state, choose a size and edit the local on/off treatments to match product hierarchy.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Property or slot	Type	Default	Description
`pressed`	`model<boolean>`	`false`	Pressed state with two-way binding support.
`disabled`	`boolean`	`false`	Forwards the native disabled state.
`variant`	`'default' \| 'outline'`	`'default'`	Visual treatment for the toggle.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control height and padding.

Accessibility contract

The native button publishes aria-pressed and remains operable with Enter and Space.

Provide a visible label or accessible name that describes what becomes active, not an ambiguous on/off state.