Toggle
A two-state button that can be either on or off.
Default
The standard toggle button.
toggle-example-default.ts
Outline
A toggle with an outline variant.
toggle-example-outline.ts
With Text
Combining icons and text within a toggle.
toggle-example-with-text.ts
Sizes
Small and large size variations.
Small
toggle-example-small.ts
Large
toggle-example-large.ts
Cool Colors
Custom status colors using Tailwind utility classes.
toggle-example-colors.ts
Educational Examples
Use cases for toolbars and security settings.
Development Tools
Toggles are perfect for binary states in application toolbars or settings.
Security Preferences
Combine Spartan UI with Tailwind utility classes to create distinct active states.
toggle-example-text.ts
Disabled
A disabled toggle button state.
toggle-example-disabled.ts
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Brain API
The Brain component provides the core logic and accessibility for the toggle.
| Directive | Selector | Inputs |
|---|---|---|
| BrnToggle | brn-toggle |
|
Helm API
The Helm component provides the spartan/ui styling for the toggle.
| Directive | Selector | Inputs |
|---|---|---|
| HlmToggle | button[hlmToggle] |
|