| title | Button |
|---|---|
| description | Triggers a click action usually performed by the user to trigger an event such as submitting a form or closing a dialog. |
| source | packages/raystack/components/button |
import { playground, variantsDemo, sizesDemo, colorsDemo, disabledDemo, loadingDemo, iconsDemo, } from "./demo.ts";
Import and assemble the component:
import { Button } from '@raystack/apsara'
<Button />Renders a clickable button element.
Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is solid.
Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is accent.
The Button component offers two size options. Default size is normal.
The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is false.
The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.
The button component accepts optional leading and/or trailing icons.
- Uses native
buttonelement with proper ARIA attributes - Supports keyboard activation with Enter and Space keys
- Disabled state is communicated via
aria-disabledattribute - Loading state prevents interaction and announces status to screen readers
- Respects motion preferences: button loader rotation is enabled only when
prefers-reduced-motion: no-preference