Button
A clickable button component with multiple variants and sizes.
<Button>Button</Button>Usage
import { Button } from "@reva/ui";Examples
Variants
Use the variant prop to change the visual style of the Button.
<Button>Default</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="destructive">Destructive</Button><Button variant="constructive">Constructive</Button><Button variant="link">Link</Button>Sizes
Use the size prop to change the size of the Button.
<Button size="xs">Extra Small</Button><Button size="sm">Small</Button><Button>Default</Button><Button size="lg">Large</Button>With Icon
Add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for correct spacing.
<Button> <Envelope data-icon="inline-start" /> Email</Button><Button variant="outline"> Call us <ArrowRight data-icon="inline-end" /></Button>Icon Button
For icon-only controls (square buttons with no text label), use the Icon Button component. It uses the same size and variant scale as Button with square geometry.
<IconButton variant="outline" aria-label="Upload"> <ArrowUp /></IconButton>Disabled
<Button disabled>Disabled</Button>Loading
Use the loading prop to disable the button and show a spinner. The button preserves its original width so the surrounding layout doesn't shift while pending.
<Button loading>Save</Button>Pass loadingText to swap the label for a pending message. The label is rendered as a direct flex child of the button, so its typography matches the resting label exactly at every size and variant.
<Button loading loadingText="Saving...">Save</Button>Playground
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "constructive" | "link" | "default" | Visual style or semantic intent. |
size | "xs" | "sm" | "default" | "lg" | "default" | Button size. |
loading | boolean | false | Disable the button and replace its content with a spinner. |
loadingText | ReactNode | — | Optional label rendered next to the spinner while loading. |
asChild | boolean | false | Merge props onto the child element. Not supported alongside loading. |