Button

The Button component includes six variants: default (solid primary), destructive (for dangerous actions), outline (bordered), secondary (muted), ghost (transparent), and link (looks like a hyperlink). Each variant is designed for specific use cases and visual hierarchy.

Buttons support icons in three configurations: icon on the left of text, icon on the right of text, or icon-only (no text). Icons automatically size and align correctly with the button text and maintain proper spacing.

Yes! The Button component includes a loading state with a spinner animation. When loading, the button typically becomes disabled and shows a spinner, providing clear feedback that an action is in progress.

Buttons come in three sizes: small (sm) for compact spaces like tables or cards, default (md) for general use, and large (lg) for prominent calls-to-action. Each size maintains proper proportions and touch target sizes.

Use the destructive variant for actions that delete, remove, or permanently change data. The red color signals danger and prompts users to think twice before clicking. Always pair destructive actions with confirmation dialogs for important operations.

Yes, this Figma Button component matches the shadcn/ui implementation exactly, including all variants, sizes, states, and icon configurations for perfect design-to-code consistency.