Atom

Button

A versatile button component supporting multiple roles, sizes, colors, and states. Can render as button or anchor element.

Overview

The Button component is a fundamental interactive element used for triggering actions, submitting forms, or navigating to new pages. It supports multiple visual variants, sizes, and states to accommodate various use cases.

Props

Prop Type Default Description
label string - Button text content
role 'primary' | 'secondary' | 'ghost' 'primary' Visual style variant
size 'sm' | 'md' | 'lg' 'md' Size variant
color 'base' | 'primary' | 'primary-alt' | 'success' | 'warning' | 'danger' 'primary' Color variant
radius 'square' | 'sm' | 'md' | 'lg' | 'rounded' 'md' Border radius variant
iconStart ReactNode - Icon displayed before label
iconEnd ReactNode - Icon displayed after label
icon ReactNode - Icon for icon-only button
disabled boolean false Whether the button is disabled
loading boolean false Shows loading spinner
fullWidth boolean false Button fills container width
as 'button' | 'a' 'button' Element type to render
href string - Link URL when as="a"

Variants

Roles

The role prop controls the visual prominence of the button. 

<Button label="Primary" role="primary" />
<Button label="Secondary" role="secondary" />
<Button label="Ghost" role="ghost" />

Sizes

Three size options for different contexts.

<Button label="Small" size="sm" />
<Button label="Medium" size="md" />
<Button label="Large" size="lg" />

Colors

Semantic colors communicate intent.

<Button label="Primary" color="primary" />
<Button label="Success" color="success" />
<Button label="Warning" color="warning" />
<Button label="Danger" color="danger" />

Radius

Control border radius from square to fully rounded.

Examples

States

<Button label="Default" />
<Button label="Disabled" disabled />
<Button label="Loading" loading />

Full Width

As Link

Link Button 
<Button as="a" href="/signup" label="Sign Up" />

Accessibility

  • Keyboard Support: Enter and Space keys activate the button. Tab navigates to/from the button.
  • Screen Reader: Announces button label and current state (disabled, loading).
  • Focus Management: Visible focus ring appears on keyboard navigation.
  • WCAG Compliance: Meets AA standards for color contrast and touch target size.

Best Practices

  • Use descriptive labels that clearly indicate the action
  • For navigation, use as="a" with href for proper link semantics
  • Use only one primary button per context to indicate the main action
  • Reserve danger color for destructive or irreversible actions