Button

A polymorphic button component that can render as any element type via the as prop.

Variants

Sizes

Colors

Colors (Outline)

Loading State

Polymorphic

Use the as prop to render as a different element while keeping all Button styles and behavior.

With Icons

Social Login

Full-width social sign-in buttons with brand icons.

Custom Styling

Override any color with CSS variables. All components support --mantle-bg, --mantle-border, --mantle-text, --mantle-ring, and --mantle-hover.

Props

Prop	Type	Default	Description
`variant`	`"solid" \| "outline" \| "ghost"`	`"solid"`	Visual style variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color.
`loading`	`boolean`	`false`	Shows a loading spinner and disables interaction.
`disabled`	`boolean`	`false`	Disables the button.
`as`	`ElementType`	`"button"`	The element type to render as.
`startIcon`	`ReactNode`	—	Element placed before the label.
`endIcon`	`ReactNode`	—	Element placed after the label.
`--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" }}

variant"solid"

"solid" | "outline" | "ghost"

Visual style variant.

size"md"

"sm" | "md" | "lg"

Size preset.

color"blue"

Accent color.

loadingfalse

boolean

Shows a loading spinner and disables interaction.

disabledfalse

boolean

Disables the button.

as"button"

ElementType

The element type to render as.

startIcon

ReactNode

Element placed before the label.

endIcon

ReactNode

Element placed after the label.

--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" }}