The Button component provides a flexible and customizable button element that can be used throughout your documentation. It supports multiple variants, sizes, and can function as either a button or link.

Basic Usage

The most basic button uses the secondary variant and medium size by default.

<Button>Default Button</Button>

As a Link

The Button component can also function as a link by providing an href prop.

<Button href="#as-a-link">Button Link</Button>

Variants

The Button component comes with several variants to suit different contexts and purposes:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="info">Info</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="error">Error</Button>

Each variant serves a specific purpose:

• primary: For primary actions with high emphasis
• secondary: Default variant for standard actions
• outline: Subtle variant with just a border
• ghost: Most subtle variant without background or border
• info, success, warning, error: Status variants for different states

Sizes

The Button component supports different sizes to fit various contexts.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <svg>...</svg>
</Button>

Props

The component also accepts all standard HTML attributes for both <button> and <a> elements.

Features

Icon Support

The Button component automatically styles icons to maintain consistent spacing and sizing:

• Icons are set to a fixed size (16x16px)
• Pointer events are disabled on icons
• Icons maintain consistent spacing with text

Accessibility

The Button component includes several accessibility features:

• Proper focus states with visible outlines
• Disabled state styling
• Semantic HTML (<button> or <a> as appropriate)
• Maintains proper contrast ratios for all variants