Geist Design System

Button

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

Sizes

The default size is medium.

All Types and Sizes in comparison

Shapes

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

Prefix and suffix

Rounded

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

Loading

Disabled

Link

Use ButtonLink for links with the same props as Button.

Sign Up

Best Practices
  • 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.