Button

Triggers an action. Sixteen variants — solid, soft, outline, ghost and link — four sizes, each with a square one for an icon alone, a loading state, and can render as a link.

$ pnpm dlx shadcn@latest add https://dashral.com/r/button.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/button.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/button

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2
3<>
4  <Button variant="outline">Cancel</Button>
5  <Button loading={saving} onClick={() => api.save()}>
6    Save changes
7  </Button>
8</>

Examples

Colors

Every variant comes in every color. Outline and ghost default to neutral, the rest to primary.

primaryneutralinfosuccesswarningdestructivehighlight

solid

soft

outline

ghost

Glow

A soft colored shadow under a solid button, for the one action that matters most.

Sizes

xs, sm, default and lg, each with a square icon size at the same height: icon-xs, icon-sm, icon and icon-lg.

With icon

Loading

loading shows a spinner in place of the label (with loadingText beside it), keeping the button's width, and ignores clicks without losing focus.

While loading it keeps its width, ignores clicks and keeps keyboard focus.

As a link

Use asChild to apply button styles to another element.

View pricing

API reference

Button

Also takes every prop of <button>(opens in a new tab).

Prop	Type	Default
`variant`	`"solid" \| "soft" \| "outline" \| "ghost" \| "link"` How much it stands out.	`"solid"`
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` What it means.	`"primary" (outline, ghost: "neutral")`
`glow`	`boolean` A soft colored shadow under a solid button.	`false`
`size`	`"xs" \| "sm" \| "default" \| "lg" \| "icon-xs" \| "icon-sm" \| "icon" \| "icon-lg" \| "inline"` Height and padding; each icon size is square, as tall as the size it's named after; inline has neither, for a link-style button in a sentence.	`"default"`
`loading`	`boolean` Shows a spinner in place of the label, which stays (hidden) so the button keeps its width, and ignores clicks, but stays focusable.	`false`
`loadingText`	`ReactNode` Beside the spinner while loading, e.g. "Saving…"; the button is as wide as the wider of it and the label. Not with asChild.	—
`asChild`	`boolean` Render the child element instead (e.g. a Next.js Link), passing these styles and props to it.	`false`
`className`	`string` Extra classes, merged with cn() so yours win.	—

buttonVariants

The class builder, to style a link or another element like a button: buttonVariants({ variant, color, size }).

Keyboard

Keys	Action
`Enter`or`Space`	Activate

Accessibility

A native button, so focus, Enter and Space come built in. Give icon-only buttons an aria-label.
loading sets aria-busy and aria-disabled instead of disabled, so focus isn't lost mid-action and a submit button doesn't submit its form twice.

Motion

Presses in to 97% while held (--duration-fast, --ease-standard). Off with reduced motion, for disabled buttons, while loading, and on a button that opens a menu, popover or tooltip (Radix places the layer from it as it opens).