ComponentsFoundations
Triggers an action. Eight variants, a loading state, and the option to render as another element (asChild).
Radix Slot components/button.tsxtheme · material · accent · density · font
Installation
$ pnpm add @vamos-cms/ui
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-cms/ui/styles.css";
Usage
import { Button } from "@vamos-cms/ui";
<Button variant="primary">Publish</Button>Examples
Variants
Use one primary per screen; keep the rest secondary or ghost.
Sizes
The md height comes from the --control-h token, so it follows the density axis.
With icon
Put the icon before the label; it is sized from the button size.
Loading
loading locks the button and adds a spinner and aria-busy.
As link
With asChild the styles are kept and the rendered element is your <Link>.
Pill
Fully rounded — for website CTAs.
API
Button
| Prop | Type | Default |
|---|---|---|
variantVisual weight. | "primary" | "secondary" | "solid" | "soft" | "ghost" | "danger" | "danger-ghost" | "link" | "secondary" |
sizeHeight and padding. | "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "md" |
loadingSpinner + click lock + aria-busy. | boolean | false |
asChildPass the styles to the single child element (e.g. Next Link). | boolean | false |
blockFull width. | boolean | false |
pillFully rounded corners. | boolean | false |
IconButton
| Prop | Type | Default |
|---|---|---|
labelRequired. Used as aria-label and title. | string | — |
sizeSquare size. | "xs" | "sm" | "md" | "md" |
variantSame variants as Button. | Button variant | "ghost" |