Button

An interactive component that helps users perform clear actions. Built on Base UI Button for keyboard accessibility and focus management.

Preview

Examples

Variant

Controls the visual emphasis level. Choose based on the importance of the action in context.

Value	Default	Description
`solid`	✓	Filled background. Use for the primary CTA that needs the most emphasis.
`outline`		Border only. Use for secondary actions with less emphasis than solid.
`ghost`		No background or border. Use when minimal emphasis is needed.
`weak`		Semi-transparent background. Pairs well with solid as a secondary action.

Size

Controls the button size. Choose based on context and required click area.

Value	Default	Description
`small`		For tight spaces or secondary actions.
`medium`	✓	Most versatile size.
`large`		For primary CTAs or when a larger click area is needed.
`xlarge`		For high-visibility CTAs on large screens.

Intent

Expresses the semantic purpose of the button through color. Choose based on the nature of the action.

Value	Default	Description
`primary`	✓	Main action for core app features.
`secondary`		Secondary action to pair with primary.
`success`		Positive outcomes: complete, save, confirm.
`warning`		Actions that require caution.
`danger`		Irreversible actions like delete or reset. Clearly warn the user.
`neutral`		Neutral actions with no semantic emphasis.

Rounded

Controls the corner radius of the button.

Value	Default	Description
`small`		Small corner radius
`medium`	✓	Default corner radius
`large`		Large corner radius (pill-like)

Full width

When fullWidth is true, the button fills the full width of its parent container.

Disabled

Disables the button. When disabled, click events do not fire and the disabled style is applied.

Guidelines

Choosing variant

Choose the variant based on the importance of actions on the screen. Prefer a single solid button per view. Multiple solid buttons make it harder for users to identify the primary action.

solid → Single most important CTA on the screen
weak → Secondary action paired with solid
outline / ghost → Tertiary actions with low emphasis

Choosing intent

Use intent to convey the semantic nature of the action. For irreversible actions (delete, reset), always use danger to clearly warn the user.

Submit and links

Submit buttons: Unlike the native <button>, you must set type="submit" for the Button to act as a submit button in forms.
Links: Do not use Button for links. If a link should look like a button, style the <a> element directly.

Props

Prop

Default

Type

variant?

"solid"

"solid" | "outline" | "ghost" | "weak"

size?

"medium"

"small" | "medium" | "large" | "xlarge"

intent?

"primary"

rounded?

"medium"

"small" | "medium" | "large"

fullWidth?

false

boolean

disabled?

false

boolean

children?

—

ReactNode