Components
Button
Actions, from the one glowing primary action to quiet ghost buttons.
Import
import { Button } from '@rinzai/zen';Examples
Tones
A link sits in the text and truncates; tone quiets it or makes it red. An icon button with a destructive tone turns red only when pointed at.
Saved. or
As link
asChild puts the button's styles on your own element, here a link (a router's Link works the same way).
API reference
<Button>
A button in one of Zen's styles. With asChild, the styles go onto your own single child element instead, such as a router's Link (loading and type then don't apply).
| Prop | Type | Default |
|---|---|---|
asChildPut the button's styles on the single child element (e.g. a link) instead of a <button>. | boolean | false |
loadingShows a spinner and disables the button while an action runs. | boolean | false |
size | "default" | "icon-lg" | "icon-sm" | "icon-xs" | "icon" | "lg" | "sm" | null | — |
tone | "default" | "inherit" | "muted" | "negative" | null | — |
variant | "default" | "ghost" | "link" | "outline" | "secondary" | null | — |