Button

• Layer: Component
• Base: @ark-ui/solid + Park UI recipe

Variants

All variants

SolidOutlineGhostSubtle

Variant	Purpose	When to use
solid	Main action	One per visible area. Filled background.
outline	Secondary action	Bordered, no fill. Pairs with solid.
ghost	Tertiary action	Low-emphasis — toolbars, repeated actions in lists. Transparent with hover fill.
subtle	Neutral action	Non-accent actions — cancel, dismiss, secondary navigation. Muted fill.

Sizes

Size comparison

SmallMediumLarge

Size	Use
sm	Dense UIs, inline actions, toolbar buttons
md	Default. Most contexts.
lg	Prominent CTAs, hero sections

States

Disabled states

NormalDisabled

• Default — resting appearance per variant
• Hover — background fill shift per variant
• Focus — Offset glow via :focus-visible: bg gap + cyan ring + inner glow + outer spread. No ring on click.
• Active — further brightness reduction
• Disabled — opacity: 0.4, cursor: not-allowed, pointer-events: none

Interactive Example

Click counter

Clicked 0 timesReset

Props

Prop	Type	Default	Description
variant	'solid' | 'outline' | 'ghost' | 'subtle'	'solid'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disables interaction
children	JSX.Element	required	Button content

Plane 1 Constraints

• No gradients
• No drop shadows (except focus ring)
• No layout shift on hover
• No delight phenomenon colours

Accessibility

• Keyboard: Enter and Space trigger the action
• Focus ring via :focus-visible — not shown on mouse click
• Disabled uses aria-disabled via Ark UI

Token Dependencies

Token	Source
--button-bg-primary	--color-accent-primary
--button-text-primary	--color-background-base
--button-bg-ghost-hover	--color-accent-primary-dim
--button-bg-dim	--color-background-surface-alt
--button-bg-danger	--color-status-error
--button-radius	--radius-md
--button-disabled-opacity	0.4