npm i @velkin/react
import { VuButton } from "@velkin/react/button";| Prop | Type | Default | Description |
|---|---|---|---|
| variant | VuButtonVariant | "solid" | Visual treatment. Default: `"solid"`. |
| color | VuButtonColor | "default" | Token intent. Default: `"default"`. |
| size | VuButtonSize | "md" | Discrete size. Default: `"md"`. |
| radius | VuButtonRadius | "md" | Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `"md"`. |
| type | VuButtonType | "button" | Native button type. Default: `"button"`. |
| name | string | "" | Form-control name submitted with `type="submit"`. |
| value | string | "" | Form-control value submitted with `name`. |
| form | string | "" | ID of an external `<form>` to submit or reset. |
| disabled | boolean | false | Non-interactive; drops out of tab order. Default: `false`. |
| loading | boolean | false | Shows a spinner and blocks clicks. Default: `false`. |
| block | boolean | false | Stretches the button to fill its container. Default: `false`. |
| iconOnly | boolean | false | Square 1:1 hit target; `label` is `aria-label` only. Default: `false`. |
| label | string | "" | Plain-text fallback for the default slot; icon-only buttons use it as `aria-label`. |
| pressed | boolean | false | Toggle or selected state; exposes `aria-pressed`. Default: `false`. |
| preset | string | — | Named bag from nearest `vu-config-provider`; omitted from the DOM while empty. |
| Event | Detail | Description |
|---|---|---|
| click | MouseEvent | Bubbles natively from the inner `<button>`. Suppressed when `disabled` or `loading`. |
| Slot | Description |
|---|---|
| — | - Button label (text or markup). |
| start | Optional leading icon, rendered before the label. |
| end | Optional trailing icon, rendered after the label. |
| Part | Description |
|---|---|
| base | The native `<button>` element (most styling lives here). |
| start | Wrapper around the leading icon slot. |
| end | Wrapper around the trailing icon slot. |
| label | Wrapper around the default text slot. |
| spinner | The loading spinner shown when `loading` is true. |
| Name | Definition |
|---|---|
| VuButtonColor | |
| VuButtonRadius | |
| VuButtonSize | |
| VuButtonType | |
| VuButtonVariant | |