Toggle

Two-state button on aria-pressed — outline by default, ghost variant, accent surface when pressed.

INSTALL

1pnpm dlx @sayagodev/mo add toggle

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/toggle.css";

EXAMPLES

Bookmark

1<div class="hstack gap-2">2  <button type="button" class="outline" aria-pressed="true">3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>4    Bookmark5  </button>6  <button type="button" class="outline" aria-pressed="false">7    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>8    Bookmark9  </button>10</div>11

Outline icons

1<div class="hstack gap-2">2  <button type="button" aria-label="Toggle bold" aria-pressed="true">3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg>4  </button>5  <button type="button" aria-label="Toggle italic" aria-pressed="false">6    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" x2="10" y1="4" y2="4" /><line x1="14" x2="5" y1="20" y2="20" /><line x1="15" x2="9" y1="4" y2="20" /></svg>7  </button>8</div>9

With text

1<button type="button" class="ghost" aria-pressed="false">2  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" x2="10" y1="4" y2="4" /><line x1="14" x2="5" y1="20" y2="20" /><line x1="15" x2="9" y1="4" y2="20" /></svg>3  Italic4</button>5

Sizes

1<div class="hstack gap-2">2  <button type="button" aria-pressed="true">3    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>4    Pressed5  </button>6  <button type="button" class="small" aria-pressed="false">Small</button>7  <button type="button" class="large" aria-pressed="false">Large</button>8</div>9

Disabled

1<div class="hstack gap-2">2  <button type="button" aria-pressed="false" disabled>Disabled off</button>3  <button type="button" aria-pressed="true" disabled>Disabled on</button>4</div>5

USAGE

1<button aria-pressed="false">2  <svg … />3  Bookmark4</button>5 6<button class="ghost" aria-pressed="true">Pressed</button>

API

NAMEKINDDESCRIPTION

[aria-pressed]attributeSelects the component; "true" is the on state

.ghostattributeBorderless variant

.small / .largeclassh-6 / h-10 sizes

--mo-toggle-bgtokenPressed surface color hook

FILES

src/css/toggle.css

Install:mo add toggle

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--foreground--muted--radius

Component hooks

--mo-toggle-bg

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.