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

packages.sections.api

Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.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`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

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.

packages.title