Toggle

A binary on/off switch. Two variants — Active and Inactive — with all colors, sizing and geometry pulled directly from the LUSTER Figma component.

Variant

Figma Properties
Variant: Active
Track color: #916DFF
Knob color: #FFFFFF
Size: 38 × 22px
Knob: 16 × 16px
Border: 2px · Padding: 3px

Tip: click the toggle to switch it.

Variant

Active

Inactive

Design Tokens

Token Name	Figma Variable	Default Value
--toggleOnBgColor	Toggle/On/Bg/Color	#916DFF
--toggleOnBorderColor	Toggle/On/Border/Color	#916DFF
--toggleOnCircleBgColor	Toggle/On/Circle/Bg/Color	#FFFFFF
--toggleOffBgColor	Toggle/Off/Bg/Color	#8F8B96
--toggleOffBorderColor	Toggle/Off/Border/Color	#8F8B96
--toggleOffCircleBgColor	Toggle/Off/Circle/Bg/Color	#FFFFFF
--toggleSizeWidth	Toggle/Size/Width	38px
--toggleSizeHeight	Toggle/Size/Height	22px
--toggleCircleSizeWidth	Toggle/Circle/Size/Width	16px
--toggleCircleSizeHeight	Toggle/Circle/Size/Height	16px
--togglePaddingX	Toggle/Padding/X	3px
--togglePaddingY	Toggle/Padding/Y	3px
--toggleBorderWidth	Toggle/Border/Width	2px
--toggleBorderRadius	Toggle/Border/Radius	0px
--toggleCircleBorderRadius	Toggle/Circle/Border/Radius	0px

Usage Guidelines

✓ DO

Use a toggle for an immediate on/off setting that applies instantly.

✓ DO

Pair the toggle with a clear text label describing what it controls.

✕ DON'T

Don't use a toggle when changes require a separate Save action — use a checkbox.

✕ DON'T

Don't rely on color alone — keep the knob position meaningful.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import React from 'react';
import './Toggle.css';

export interface ToggleProps {
  checked: boolean;
  onChange: (next: boolean) => void;
  disabled?: boolean;
  'aria-label'?: string;
}

export const Toggle = ({ checked, onChange, disabled, ...props }: ToggleProps) => (
  <button
    type="button"
    role="switch"
    aria-checked={checked}
    disabled={disabled}
    className={`toggle ${checked ? 'toggle--on' : 'toggle--off'}`}
    onClick={() => onChange(!checked)}
    {...props}
  >
    <span className="toggle__knob" />
  </button>
);

/* Toggle tokens — generated from LUSTER Figma variables */
:root {
  --toggleOnBgColor: #916DFF;
  --toggleOnBorderColor: #916DFF;
  --toggleOffBgColor: #8F8B96;
  --toggleOffBorderColor: #8F8B96;
  --toggleCircleBgColor: #FFFFFF;
  --toggleSizeWidth: 38px;
  --toggleSizeHeight: 22px;
  --toggleCircleSize: 16px;
  --togglePadding: 3px;
  --toggleBorderWidth: 2px;
}

.toggle {
  width: var(--toggleSizeWidth);
  height: var(--toggleSizeHeight);
  border-radius: 999px;
  border: var(--toggleBorderWidth) solid transparent;
  padding: 0 var(--togglePadding);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.toggle__knob {
  width: var(--toggleCircleSize);
  height: var(--toggleCircleSize);
  border-radius: 50%;
  background: var(--toggleCircleBgColor);
  transition: all 0.2s ease;
}
.toggle--on  { background: var(--toggleOnBgColor);  border-color: var(--toggleOnBorderColor);  justify-content: flex-end; }
.toggle--off { background: var(--toggleOffBgColor); border-color: var(--toggleOffBorderColor); justify-content: flex-start; }
.toggle:disabled { opacity: 0.5; cursor: not-allowed; }

<!-- Active (on) -->
<button class="toggle toggle--on" role="switch" aria-checked="true">
  <span class="toggle__knob"></span>
</button>

<!-- Inactive (off) -->
<button class="toggle toggle--off" role="switch" aria-checked="false">
  <span class="toggle__knob"></span>
</button>

import { useState } from 'react';
import { Toggle } from '@luster/ui';

export default function Settings() {
  const [enabled, setEnabled] = useState(true);
  return (
    <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <Toggle checked={enabled} onChange={setEnabled} aria-label="Notifications" />
      Enable notifications
    </label>
  );
}