Switches toggle a single setting on or off. In Norbielink, they appear in the sidebar footer to control Dark Mode and Legacy View, and in settings forms. Three color variants reflect different semantic meanings.
Dark Mode
On — Orange
Legacy View
Off — Gray
Notifications
On — Orange
Feature Flag
On — Orange
States
Each switch has three states: on, off, and disabled. The thumb always stays white. The track color changes to communicate the current state.
Color variants
Three track colors are used depending on context. Dark Mode uses Orange (a signal of a major mode change), settings use Teal, and feature flags use Purple.
In context — Sidebar footer
How the Dark Mode and Legacy View switches appear in the Norbielink sidebar footer.
Chat with Norbie
AI Assistant
Specs
| Property | Value |
|---|---|
| Track width | 36px |
| Track height | 20px |
| Track radius | 9999px |
| Thumb size | 16×16px circle, top 2px |
| Thumb color | white always |
| Thumb shadow | 0 1px 3px rgba(0,0,0,.20) |
| On position | Thumb at translateX(19px) |
| Off position | Thumb at translateX(2px) |
| Track on | #E8622A — the only on colour |
| Track off (light) | #D1D5DB (gray-300) |
| Track off (dark) | rgba(white, 20%) |