Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Switch

Switch

Switches are used for immediate on/off settings in Aggarly Platform. They support tones, sizes, RTL-safe thumb motion, and premium settings-row alignment. For dense toolbars, label-less switches are allowed but must include aria-label.

Premium Switch

Enterprise default. Premium track + thumb treatment with token-safe gradients and a subtle sheen.

Show code
Premium switch (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-list">
      <Switch
        ui="premium"
        label="Email notifications"
        description="Receive updates for session changes and supervisor notes."
        defaultChecked
      />

      <Switch
        ui="premium"
        label="Workspace member portal visibility"
        description="Allow workspace members to view read-only progress summaries."
      />

      <Switch
        ui="premium"
        label="Lock editing"
        description="Requires supervisor role."
        disabled
      />
    </div>
  );
}

Glass Neuomorphic Switch

Glass/neuomorphic style using token-driven translucent surfaces and blur. Use selectively for premium settings surfaces.

Show code
Glass switch (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-list">
      <Switch
        ui="glass"
        tone="primary"
        label="Glass mode"
        description="Glass/neuomorphic switch style."
        defaultChecked
      />

      <Switch
        ui="glass"
        tone="secondary"
        label="Supervisor review"
        description="Require approval for plan changes."
      />

      <Switch
        ui="glass"
        tone="neutral"
        label="Advanced analytics"
        description="Enable additional metrics and exports."
      />
    </div>
  );
}

Switch Colors

Use tones to communicate semantic intent and align with the rest of the design system.

Show code
Switch tones (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-grid">
      <Switch tone="primary" label="Primary" defaultChecked />
      <Switch tone="secondary" label="Secondary" defaultChecked />
      <Switch tone="success" label="Success" defaultChecked />
      <Switch tone="warning" label="Warning" defaultChecked />
      <Switch tone="danger" label="Danger" defaultChecked />
      <Switch tone="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Sizes

Use sm for compact toolbars, md for standard settings, and lg for primary configuration pages.

Show code
Switch sizes (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-list">
      <Switch size="sm" label="Small" defaultChecked />
      <Switch size="md" label="Default" defaultChecked />
      <Switch size="lg" label="Large" defaultChecked />
    </div>
  );
}

Positions

End position is the default and recommended for settings rows. Start position is useful when the control should be emphasized.

Show code
Switch position (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-list">
      <Switch
        position="end"
        label="Settings row (recommended)"
        description="Label left, switch right."
        defaultChecked
      />

      <Switch
        position="start"
        label="Control-first"
        description="Switch left, label right."
      />
    </div>
  );
}

Without Labels

Use for dense toolbars only. Always provide aria-label or aria-labelledby.

Show code
No-label switches (JSX)
import { Switch } from "@/design-system/components/Switch";

export function Example() {
  return (
    <div className="switches-toolbar" aria-label="Toolbar toggles">
      <Switch aria-label="Toggle grid view" defaultChecked />
      <Switch tone="secondary" aria-label="Toggle compact mode" />
      <Switch tone="neutral" aria-label="Toggle advanced filters" />
      <Switch tone="danger" aria-label="Toggle lockdown mode" disabled />
    </div>
  );
}