Design System Beacon

Button

Interactive buttons for user actions. Use buttons to trigger actions, navigate, or submit forms.

Overview

Buttons are interactive elements that allow users to perform actions. The Button component supports multiple variants, sizes, and states to fit different contexts and use cases.

All button styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the button and see how it looks in real-time. Toggle between themes and hues to see how buttons adapt to different contexts.

Variant

State

Color

Size

Radius

Icon

Fill Container

<Button>
  Button
</Button>

Anatomy

A button consists of several parts that work together to create a cohesive interactive element.

Button

Containerpadding, border-radius

Content Areaflex layout, gap

Label--body-*-text-size

Icon Spacing--spacing-100

Border--border-width-25

Variants & States

Buttons come in four main variants, each suited for different levels of emphasis and use cases.

Filled

Primary actions and high-emphasis buttons. Use for the main action on a page or in a form.

Tonal

Secondary actions with subtle emphasis. Use for supporting actions that don't need primary attention.

Outline

Tertiary actions with border emphasis. Use for less important actions or when you need visual separation.

Link

Text-only buttons for low-emphasis actions. Use for navigation or actions that don't need visual weight.

For a complete matrix of all button variants, sizes, and states, see the Button component in Figma.

Usage Guidelines

Use buttons for actions that trigger immediate responses.
Use filled buttons for primary actions on a page.
Provide clear, action-oriented labels (e.g., "Save", "Submit", "Delete").
Use icons to enhance clarity when appropriate.
Ensure buttons meet WCAG contrast requirements.
Use appropriate sizes based on context and importance.

Don't

Don't use buttons for navigation (use links instead).
Don't use multiple primary buttons on the same screen.
Don't use vague labels like "Click here" or "Submit".
Don't disable buttons without explaining why.
Don't use buttons for decorative purposes.
Don't make buttons too small to tap comfortably on mobile.

Accessibility

Buttons must be keyboard accessible. Use type="button" for non-submit buttons.
Provide descriptive labels for screen readers using aria-label when needed.
Ensure focus states are clearly visible with sufficient contrast.
Use disabled attribute for disabled buttons, not just visual styling.
Loading states should be announced to screen readers.

API Reference

Button component props and types.

ButtonProps

interface ButtonProps {
  variant?: "filled" | "tonal" | "outline" | "link";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  cornerRadius?: 0 | 1 | 2 | 3 | 4 | 5;
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
  fillContainer?: boolean;
  disabled?: boolean;
  loading?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
  type?: "button" | "submit" | "reset";
  "aria-label"?: string;
}

Props

variant

"filled" | "tonal" | "outline" | "link"

"filled"

Button style variant

size

"xs" | "sm" | "md" | "lg" | "xl"

"md"

Button size

cornerRadius

0 | 1 | 2 | 3 | 4 | 5

2

Corner radius step: 0=None, 1=100 (4px), 2=200 (8px), 3=300 (12px), 4=400 (16px), 5=Full (100%)

startIcon

React.ReactNode

—

Icon to display at the start (grouped with text)

endIcon

React.ReactNode

—

Icon to display at the end (independent, aligns right when fill container is enabled)

fillContainer

boolean

false

Make button full-width

disabled

boolean

false

Disable button interaction

loading

boolean

false

Show loading state

Usage Examples

Copyable code snippets for common button use cases.

Basic Button

import { Button } from 'beacon-ui';

<Button>Button</Button>

Button with Icons

import { Button } from 'beacon-ui';
import { SearchIcon, ChevronDownIcon } from 'beacon-icons';

<Button startIcon={<SearchIcon size="xs" />} endIcon={<ChevronDownIcon size="xs" />}>
  Search
</Button>

All Variants

import { Button } from 'beacon-ui';

<Button variant="filled">Filled</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="outline">Outline</Button>
<Button variant="link">Link</Button>

Sizes

import { Button } from 'beacon-ui';

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

Fill Container

import { Button } from 'beacon-ui';

<Button fillContainer>Full Width Button</Button>

Disabled State

import { Button } from 'beacon-ui';

<Button disabled>Disabled Button</Button>