Button [Default]

Overview

The Button is the foundational action component of Create UI. It drives every user interaction, from primary calls-to-action to subtle ghost triggers, with 7 semantic variants, 4 appearance styles, 5 sizes, and full interaction states, built for real product use in Figma and React.

When should you use them?

Use buttons for any action that needs a user to commit: submitting a form, confirming a dialog, or triggering a primary flow. Choose the variant and appearance that match the action's importance, solid primary for the main action, soft or ghost for secondary and tertiary options.

How should you use them?

• Reserve the Primary variant for the single most important action on a screen.
• Match the variant to intent: Danger for destructive actions, Success for confirmations.
• Build hierarchy with appearance: Solid for primary, Outline or Soft for secondary, Ghost for tertiary.
• Pick the size for the context: XS for compact toolbars, XL for hero CTAs.
• Use the Loading state for async actions, and keep every button keyboard-focusable with a clear accessible label.