form

Toggle

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

Preview

A preview of the Toggle component with interactive controls.

Preview Code

Interactive

Add the Toggle component to your project.

Bash

ng g @ng-cn/core:c toggle

Import and use the Toggle component in your Angular application.

Template TypeScript

template.html

<Toggle aria-label="Toggle bold">
  <lucide-icon name="bold" class="h-4 w-4" />
</Toggle>

Explore different variations and use cases for the Toggle component.

Preview Code

Interactive

Preview Code

Interactive

Preview Code

Interactive

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	The visual style of the toggle.
`size`	`'default' \| 'sm' \| 'lg'`	`'default'`	The size of the toggle.
`pressed`	`boolean`	`false`	Whether the toggle is pressed.