Buttons
A flexible button component supporting multiple variants, sizes, colors, and states. Perfect for actions, navigation, and user interactions throughout your application.
Installation
Import
Usage
Use buttons for primary actions, form submissions, and navigation. Choose variants based on visual hierarchy: solid for primary actions, outline for secondary actions, text for tertiary actions, and soft for subtle emphasis. Always provide aria-label for icon-only buttons.
Design Guidelines
Buttons should be used consistently throughout the application. Primary actions should use solid variant with primary color. Destructive actions should use destructive color. Maintain consistent spacing between buttons (8px gap recommended). Button text should be concise and action-oriented.
Basic Usage
Simple button with default styling
Variants
Structural styles: solid, outline, text, soft, and plain
Colors
Semantic color options
Sizes
Size options from small to extra large
Variant + Color Combinations
Examples of different variant and color combinations
With Icons
Buttons with leading, trailing, and both icons
Loading States
Loading state with default and custom loading icons
Disabled States
Disabled buttons in different variants
Full Width
Buttons that span the full width of their container
Button Types
Different HTML button types for forms
No Ring
Buttons without focus ring for custom focus styles
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'outline' | 'text' | 'soft' | 'plain' | 'solid' | Structural style of the button |
color | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'neutral' | 'neutral' | Semantic color of the button |
buttonSize | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'md' | Size of the button |
loading | boolean | false | Shows a loading spinner and disables the button |
disabled | boolean | false | Disables the button |
leadingIcon | IconName | — | Icon to display before the button text |
trailingIcon | IconName | — | Icon to display after the button text |
loadingIcon | IconName | — | Custom icon to use for loading state |
fullWidth | boolean | false | Makes the button span the full width of its container |
noRing | boolean | false | Removes the focus ring for custom focus styles |
type | 'button' | 'submit' | 'reset' | 'button' | HTML button type attribute |
aria-label | string | — | Accessibility label (required for icon-only buttons) |
tooltip | string | React.ReactNode | — | Tooltip content to display on hover |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
The Button component follows WCAG 2.1 AA standards. Icon-only buttons require an aria-label or aria-labelledby attribute. Loading states are announced to screen readers. Keyboard navigation is fully supported with Enter and Space keys.