Skip to main content
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

​
variant
'solid' | 'outline' | 'ghost' | 'text'
default:"'solid'"
The visual style variant of the button.
​
color
'accent' | 'danger' | 'neutral' | 'success'
default:"'accent'"
The color theme of the button.
​
size
'small' | 'normal'
default:"'normal'"
The size of the button.
​
disabled
boolean
Whether the button is disabled.
​
loading
boolean
Whether the button is in a loading state. Shows a spinner when true.
​
loaderText
ReactNode
Text to display alongside the loading spinner.
​
leadingIcon
ReactNode
Icon element to display before the button text.
​
trailingIcon
ReactNode
Icon element to display after the button text.
​
maxWidth
string | number
Maximum width of the button.
​
width
string | number
Width of the button.
​
style
React.CSSProperties
Additional inline styles to apply to the button.
​
className
string
Additional CSS classes to apply to the button.
​
children
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.