NorbieLink
search close
Home›Components›Switches

Switches

arrow_back arrow_forward

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.

On
On state
Track: color.warning (#E8622A) · Thumb: white · positioned right
Off
Off state
Track: gray-300 (#D1D5DB) · Thumb: white · positioned left
Disabled
Disabled state
Opacity: 40% · cursor: not-allowed · no interaction

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.

Orange — Dark Mode toggle
Track: #F97316 (color.warning) · Used exclusively for the Dark Mode toggle in the sidebar footer. The orange signals a major visual mode change.
Orange — General settings
Track: #E8622A (color.warning) · Used for notification preferences, user settings, and general feature toggles.
Orange — Feature flags
Track: #E8622A (color.warning) · Used for beta features, ProSuite unlocks, and admin-level feature toggles.

Specs

PropertyValue
Track width52px
Track height30px
Track radius15px (shape.full)
Thumb size22×22px circle
Thumb colorwhite always
Thumb shadow0 1px 4px rgba(0,0,0,.25)
On positionThumb at right: translateX(26px)
Off positionThumb at left: translateX(4px)
Track on (Dark Mode)#F97316 (warning)
Track on (General)#E8622A (warning/orange)
Track on (Feature)#E8622A (warning/orange)
Track off (light)#D1D5DB (gray-300)
Track off (dark)rgba(white, 20%)