Button

Triggers a click action usually performed by the user to trigger an event such as submitting a form or closing a dialog.

Usage

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

Button Props

Prop

Type

Examples

Variant

Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is solid.

1<Flex gap="large">
2  <Button variant="solid">Solid</Button>
3  <Button variant="outline">Outline</Button>
4  <Button variant="ghost">Ghost</Button>
5  <Button variant="text">Text</Button>
6</Flex>

Color

Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is accent.

1<Flex gap="large">
2  <Button color="success">Accent</Button>
3  <Button color="danger">Danger</Button>
4  <Button color="neutral">Neutral</Button>
5  <Button color="success">Success</Button>
6</Flex>

Size

The Button component offers two size options. Default size is normal.

1<Flex gap="large" align="center">
2  <Button size="small">Small</Button>
3  <Button size="normal">Normal</Button>
4</Flex>

Disabled

The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is false.

1<Flex gap="large">
2  <Button variant="solid" disabled>
3    Solid
4  </Button>
5  <Button variant="outline" disabled>
6    Outline
7  </Button>
8  <Button variant="ghost" disabled>
9    Ghost
10  </Button>
11  <Button variant="text" disabled>
12    Text
13  </Button>
14</Flex>

Loading

The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.

1<Flex gap="large">
2  <Button variant="solid" loading>
3    Button
4  </Button>
5  <Button variant="solid" loading loaderText="Loading...">
6    Button
7  </Button>
8  <Button variant="outline" loading loaderText="Loading...">
9    Button
10  </Button>
11</Flex>

With leading and trailing icons

The button component accepts optional leading and/or trailing icons.

1<Flex gap="large">
2  <Button variant="solid" color="accent" leadingIcon={<>I</>}>
3    With leading icon
4  </Button>
5  <Button variant="solid" color="accent" trailingIcon={<>O</>}>
6    With trailing icon
7  </Button>
8  <Button
9    variant="solid"
10    color="accent"
11    leadingIcon={<>I</>}
12    trailingIcon={<>O</>}
13  >
14    With both icons
15  </Button>
16</Flex>