Toggle

A two-state button that can be either on or off.

Preview

Installation

$npx maddex add Toggle

Usage



1<!-- @import { Toggle } from ../../lib/components -->
2<!-- @import { Bookmark } from ../../lib/ppicons -->
3
4<Toggle
5  aria-label="Toggle bookmark"
6  variant="outline"
7  class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
8>
9  <Bookmark class="size-4" />
10  Bookmark
11</Toggle>