Button

Overview

The Button component is a foundational interactive element that triggers actions when clicked. It supports multiple visual styles, sizes, and states.

Basic Usage

import { Button } from '@yourproject/components';

function Example() {
  return <Button>Click Me</Button>;
}

Variants

The Button component supports multiple visual variants:

Primary
Secondary
Tertiary
Danger

<Button variant="primary">
  Primary Action
</Button>

The primary variant is used for main actions. It features a solid background with high contrast.

<Button variant="secondary">
  Secondary Action
</Button>

The secondary variant is used for less prominent actions. It features an outlined style.

<Button variant="tertiary">
  Tertiary Action
</Button>

The tertiary variant is subtle, used for low-emphasis actions with minimal visual weight.

<Button variant="danger">
  Delete Item
</Button>

The danger variant is used for destructive actions like deletions, featuring red coloring.

Sizes

Buttons come in four sizes to fit different use cases:

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

The default size is md if not specified.

States

Disabled State

<Button disabled>
  Disabled Button
</Button>

Disabled buttons cannot be interacted with and appear visually muted.

Loading State

<Button loading>
  Processing...
</Button>

The loading state shows a spinner and prevents interaction while an async operation is in progress.

Full Width

<Button fullWidth>
  Full Width Button
</Button>

Props

string

default:"primary"

Visual style variant: primary, secondary, tertiary, or danger

string

default:"md"

Button size: sm, md, lg, or xl

boolean

default:"false"

Whether the button is disabled and cannot be interacted with

boolean

default:"false"

Shows a loading spinner and prevents interaction

boolean

default:"false"

Makes the button expand to fill its container width

function

Click event handler: (event: React.MouseEvent) => void

string

default:"button"

HTML button type: button, submit, or reset

ReactNode

required

The content to display inside the button

string

Additional CSS class names to apply

ReactNode

Optional icon to display before the button text

TypeScript Interface

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  disabled?: boolean;
  loading?: boolean;
  fullWidth?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  type?: 'button' | 'submit' | 'reset';
  children: React.ReactNode;
  className?: string;
  icon?: React.ReactNode;
}

Advanced Examples

Button with Icon

import { Button } from '@yourproject/components';
import { ChevronRight } from 'lucide-react';

function Example() {
  return (
    <Button icon={<ChevronRight />}>
      Continue
    </Button>
  );
}

Async Button

import { Button } from '@yourproject/components';
import { useState } from 'react';

function Example() {
  const [loading, setLoading] = useState(false);
  
  const handleClick = async () => {
    setLoading(true);
    await saveData();
    setLoading(false);
  };
  
  return (
    <Button 
      loading={loading} 
      onClick={handleClick}
    >
      Save Changes
    </Button>
  );
}

Use the loading prop with async operations to provide visual feedback to users.

Accessibility

Supports keyboard navigation (Enter and Space keys)
Includes proper ARIA attributes when disabled or loading
Maintains focus management for keyboard users
Color contrast meets WCAG AA standards

Overview

UI Components

Layout

Overview

Basic Usage

Variants

Sizes

States

Disabled State

Loading State

Full Width

Props

TypeScript Interface

Advanced Examples

Button with Icon

Async Button

Accessibility

​Overview

​Basic Usage

​Variants

​Sizes

​States

​Disabled State

​Loading State

​Full Width

​Props

​TypeScript Interface

​Advanced Examples

​Button with Icon

​Async Button

​Accessibility

Overview

Basic Usage

Variants

Sizes

States

Disabled State

Loading State

Full Width

Props

TypeScript Interface

Advanced Examples

Button with Icon

Async Button

Accessibility