Button

Trigger an action or event, such as submitting a form or displaying a dialog.

Sizes

The default size is medium.

Icon-only buttons should include the svgOnly prop and an aria-label.

Combination of shape="rounded" and the shadow prop, often used on marketing pages.

Use ButtonLink for links with the same props as Button.

Use CustomButton to override colors for foreground, background, and border across normal, hover, and active states.

Use Button for actions that mutate state (deploy, save, delete); use ButtonLink for navigation that changes the URL. Switch to a Menu or Split Button when more than one related action shares a row.
Default Button is primary. Pass type="secondary" for the supporting action and type="error" for destructive confirmations. primary, success, ghost, and violet are not valid type values.
For form submits, use typeName="submit". The HTML type attribute lives on typeName, not on type, which controls the visual variant.
Pass loading instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech.
Disable a button only when the action is impossible right now (missing input, insufficient permission); pair with a Tooltip that explains why.
Title Case the label and name what happens: Deploy Project, Invite Member, Rotate Key. Avoid bare verbs (Submit) and generic confirms (OK, Confirm).
Destructive buttons follow Verb + Noun and pair 1:1 with their toast: Delete Project then Project deleted. Mode-switch buttons append Instead: Use a Recovery Code Instead.
Icon-only buttons require both svgOnly and aria-label; the validator throws without them. The aria-label names the action and the target (Copy deployment URL), not the icon (Copy).
Don’t set aria-label on a button that already has visible text; it overrides the label and creates a screen-reader mismatch.

Was this helpful?