Toggle / Switch
Toggles (or switches) are interactive components that allow users to make a boolean choice (on/off).
They use design tokens to ensure consistent styling.
| Preview | State | Design Token Name | Color Value | Color Preview |
|---|
The values are dynamically loaded from the CSS design tokens, ensuring they are always up to date with the latest style adjustments.
Customizing Toggle Styles
Different frameworks implement toggle switches in various ways, but you can override their default styles using our design tokens.
Below is an overview of how toggles are styled in PrimeReact, PrimeNG, and Bootstrap, and how you can override them using our tokens.
| Framework | Default CSS Class | Property to Override | Suggested Token |
|---|---|---|---|
| PrimeReact | .p-inputswitch-slider | background-color | --interactive-toggle-on-enabled |
| PrimeReact | .p-inputswitch-input:checked | border-color | --interactive-toggle-foreground |
| PrimeNG | .p-toggleswitch-slider | background-color | --interactive-toggle-on-enabled |
| PrimeNG | .p-toggleswitch-checked | border-color | --interactive-toggle-foreground |
| Bootstrap | .form-check-input:checked | background-color | --interactive-toggle-on-enabled |
| Bootstrap | .form-check-input:checked | border-color | --interactive-toggle-foreground |
Example: Overriding Toggle Styles with Design Tokens
Below is a live preview of the current toggle design tokens, pulled directly from CSS:
| Design Token | Color Value | Preview |
|---|
By applying these design tokens, you ensure that toggles across different frameworks remain consistent with your design system.
Summary
- Different frameworks use different class names for toggles.
- You can override the styles using our design tokens.
- Using design tokens ensures a consistent design language across React, Angular, and Bootstrap implementations.