Button

The Button component provides a flexible and accessible way to trigger actions in your application. It supports multiple visual variants, loading states, and can be customized with icons.

Basic usage

import { Button } from '@raystack/apsara';

function App() {
  return <Button>Click me</Button>;
}

Props

'solid' | 'outline' | 'ghost' | 'text'

default:"'solid'"

The visual style variant of the button.

'accent' | 'danger' | 'neutral' | 'success'

default:"'accent'"

The color theme of the button.

'small' | 'normal'

default:"'normal'"

The size of the button.

boolean

Whether the button is disabled.

boolean

Whether the button is in a loading state. Shows a spinner when true.

ReactNode

Text to display alongside the loading spinner.

ReactNode

Icon element to display before the button text.

ReactNode

Icon element to display after the button text.

string | number

Maximum width of the button.

string | number

Width of the button.

React.CSSProperties

Additional inline styles to apply to the button.

string

Additional CSS classes to apply to the button.

ReactNode

The content to display inside the button.

Variants

Solid

The default filled button style.

<Button variant="solid">Solid Button</Button>

Outline

A button with a border and transparent background.

<Button variant="outline">Outline Button</Button>

Ghost

A minimal button with no border or background in its default state.

<Button variant="ghost">Ghost Button</Button>

Text

A text-only button with no background or border.

<Button variant="text">Text Button</Button>

Colors

<Button color="accent">Accent</Button>
<Button color="danger">Danger</Button>
<Button color="neutral">Neutral</Button>
<Button color="success">Success</Button>

Sizes

<Button size="small">Small Button</Button>
<Button size="normal">Normal Button</Button>

With icons

import { PlusIcon, ArrowRightIcon } from '@radix-ui/react-icons';

<Button leadingIcon={<PlusIcon />}>Add Item</Button>
<Button trailingIcon={<ArrowRightIcon />}>Continue</Button>

Loading state

<Button loading>Loading...</Button>
<Button loading loaderText="Saving">
  Save
</Button>

Disabled state

<Button disabled>Disabled Button</Button>

Custom width

<Button width="200px">Fixed Width</Button>
<Button maxWidth="300px">Max Width Button</Button>

Accessibility

The Button component is built on Base UI’s Button primitive, ensuring proper accessibility.
It maintains focus states and keyboard navigation.
When in loading state, the button becomes focusable even when disabled using focusableWhenDisabled.
Ensure to provide meaningful button text or aria-label for icon-only buttons.

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Basic usage

Props

Variants

Solid

Outline

Ghost

Text

Colors

Sizes

With icons

Loading state

Disabled state

Custom width

Accessibility

​Basic usage

​Props

​Variants

​Solid

​Outline

​Ghost

​Text

​Colors

​Sizes

​With icons

​Loading state

​Disabled state

​Custom width

​Accessibility

Basic usage

Props

Variants

Solid

Outline

Ghost

Text

Colors

Sizes

With icons

Loading state

Disabled state

Custom width

Accessibility