ToggleButton

A button that toggles between pressed and unpressed states. Supports variants, colors, and sizes.

Basic

Circular toggle buttons for actions like like, save, star, and pin. The icon fills when pressed.

Like with counter and bookmark — common social media patterns.

Prop	Type	Default	Description
`pressed`	`boolean`	—	Whether the button is pressed (controlled).
`defaultPressed`	`boolean`	`false`	Whether the button is initially pressed (uncontrolled).
`onPressedChange`	`(pressed: boolean) => void`	—	Called when the pressed state changes.
`variant`	`"solid" \| "outline" \| "ghost"`	`"solid"`	Visual style variant.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color when pressed.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`disabled`	`boolean`	`false`	Disables the toggle button.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-hover`	`CSS variable`	`gradient`	Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}

pressed

boolean

Whether the button is pressed (controlled).

defaultPressedfalse

boolean

Whether the button is initially pressed (uncontrolled).

onPressedChange

(pressed: boolean) => void

Called when the pressed state changes.

variant"solid"

"solid" | "outline" | "ghost"

Visual style variant.

color"blue"

Accent color when pressed.

size"md"

"sm" | "md" | "lg"

Size preset.

disabledfalse

boolean

Disables the toggle button.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-hovergradient

CSS variable

Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}