Toggle

Controlled only: you own the state. The hit area is 44px tall even though the track is 24, so it is comfortable on touch without looking oversized.

import { useState } from 'react';
import { Toggle } from '@andrewbehma/glass-ui';

Playground

Toggle.tsx

import { useState } from 'react';
import { Toggle } from '@andrewbehma/glass-ui';

function Example() {
  const [on, setOn] = useState(true);
  return (
    <div className="flex items-center gap-3">
      <Toggle checked={on} onChange={setOn} labelledBy="toggle-label" />
      <span id="toggle-label" className="text-body text-ink">
        Notify me about deploys
      </span>
    </div>
  );
}

States

Each tile is the live component. Open one in the playground to keep tweaking it.