Toggle

Toast
Tooltip

Toggle

Usage

Include CSS

@import "tailwindcss";
@import "5h3ll-ui/vega.css";

Or import only the base CSS, Toggle component CSS, and one style pack.

@import "tailwindcss";
@import "5h3ll-ui/base.css";
@import "5h3ll-ui/components/toggle.css";
@import "5h3ll-ui/styles/vega.css";

Add your toggle HTML

5h3ll-ui Toggle is a native <button> that uses aria-pressed for state. This intentionally maps the upstream concept onto the platform instead of introducing a custom primitive.

<button type="button" class="toggle" aria-pressed="false">Bold</button>

HTML structure

<button type=“button” class=“toggle” aria-pressed=“false|true”>
The toggle button. Update aria-pressed when your app changes state.
data-variant=“default|outline” Optional
Visual variant. Omit data-variant for the filled default style.
data-size=“default|sm|lg|icon|icon-sm|icon-lg” Optional
Size variant aligned with the Button sizing model.

Examples

Outline

Icon

Disabled