Ravox KitBasics
Button
The everyday button: default, secondary, outline, ghost, destructive and link, plus the mosaic and the house key. With an icon, icon only, loading and as a link.
Settings
Toggles
Examples
Installation
The command creates components/ui/button.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add buttonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "mosaic" | "key" | "default" | Button style. destructive for deleting and canceling; mosaic has a border made of four blocks of flat color; key has the step of a keycap and presses in on click. |
| size | "sm" | "md" | "lg" | "icon" | "icon-sm" | "md" | Height and padding. The icon sizes are square: give them an aria-label. |
| loading | boolean | false | Shows the spinner in place of the icon, blocks clicks and sets aria-busy. It doesn't fade: loading is not disabled. |
| asChild | boolean | false | Passes the styling to the child (e.g. <Link>), which remains the real element. |
| ...props | ComponentProps<"button"> | — | Everything a <button> accepts. |