Edgecom Design System

Button

Trigger actions with a range of variants, sizes, and icon layouts.

The full set of visual styles: neutral variants, then each semantic in a solid fill and a subtle tint.

Small, default, and large heights, plus the disabled state.

Leading or trailing icons paired with a text label.

Square icon-only buttons across sizes, with accessible labels.

A spinner and disabled state while an action is in flight.

A subtle ghost button whose icon animates on hover.

Tracks a promise through loading, success, and error states.

Copies text and swaps to a checkmark to confirm.

A clickable button with class-variance-authority variants and sizes, including icon-only sizes.

Anatomy

Button Clickable button with a configurable visual variant and size.

Props

Part	Prop	Type	Default	Description
`Button`	`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "success" \| "warning" \| "info" \| "destructive-subtle" \| "success-subtle" \| "warning-subtle" \| "info-subtle" \| "link"`	`"default"`	Style: neutral, semantic solid/subtle, or link.
`Button`	`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	Dimensions: default, xs, sm, lg, and icon variants.