Button

Colors

Preview

index.tsx

Primary

Neutral

Adverse

Kinds

Preview

index.tsx

Solid

Outline

Ghost

Glass

Sizes

Preview

index.tsx

Others

Preview

index.tsx

Icons

States

Design Tokens for Button

Token	Color for	State/Meaning
--par-color-text-button-<kind>-<color>-<state>	Button text	solid, outlined, ghost, glass; neutral, accent, adverse; enabled, hovered, pressed, disabled, pending
--par-color-bg-button-<kind>-<color>-<state>	Button background	solid, outlined, ghost, glass; neutral, accent, adverse; enabled, hovered, pressed, disabled, pending
--par-color-border-button-<kind>-<color>-<state>	Button border	solid, outlined, ghost, glass; neutral, accent, adverse; enabled, hovered, pressed, disabled, pending

Note: Replace kind with solid, outlined, ghost, glass; color with neutral, accent, adverse; state with enabled, hovered, pressed, disabled, pending as appropriate.

Button API Reference

`<Button />`

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Button size.
color	'neutral' \| 'accent' \| 'adverse'	'neutral'	Button color.
kind	'solid' \| 'outlined' \| 'ghost' \| 'glass'	'solid'	Button visual style.
isPending	boolean	false	Show loading spinner and disable interaction.
iconOnly	boolean	false	Icon-only button (no text).
disabled	boolean	false	Disable the button.
...buttonProps	HTMLButtonElement props		All native button props (className, style, etc.)

Note: Button extends all native props from HTMLButtonElement. See MDN: button element for more details.