Button (按钮)
按钮,支持颜色、变体与尺寸、加载状态,并可通过 href 渲染为链接。
基础用法
Basic.vue
颜色
Colors.vue
变体
Variants.vue
尺寸
Sizes.vue
状态与事件
States.vue
作为链接
AsLink.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| ariaLabel | string | "" | Accessible name. Falls back to the slot text, or to `"button"` for `isIconOnly`; set it whenever the button carries no readable text. |
| className | string | "" | Extra classes, merged after the component's own classes so yours wins the conflict — KunUI's `rounded-kun-*` / `shadow-kun-*` scales included. |
| color | KunUIColor | "primary" | Semantic colour the variant is painted in. |
| disabled | boolean | false | Blocks clicks and dims the button. In link mode the block is a JS guard, because `disabled` is a no-op on an `<a>` and the link would still navigate. |
| fullWidth | boolean | false | Stretch to the container's full width. |
| href | string | "" | Render an `<a>` (NuxtLink under Nuxt) instead of a `<button>`, keeping the button's appearance. |
| icon | boolean | false | Render the `#icon` slot beside the label. Without it that slot is not rendered at all. |
| iconPosition | "right" | "left" | "left" | Which side of the label the `#icon` slot sits on. |
| isIconOnly | boolean | false | Fixed square button, sized to the same-`size` text button's height so icon and text buttons line up in a row. Give it an `ariaLabel` — it has no text of its own. |
| loading | boolean | false | Prepends a spinner and blocks clicks. The label stays in place, so a row of buttons does not reflow mid-request. |
| rel | string | undefined | `rel` for the rendered link. Replaces the default rather than adding to it, matching NuxtLink: with `target="_blank"` and no `rel`, KunUI emits `noopener noreferrer`; passing `rel="noopener"` emits exactly that, which is how you keep the `Referer` header (analytics on the other side count the visit as a referral instead of direct traffic). `noopener` is still added back to any `_blank` link unless the value contains the spec's `opener` token; `rel=""` removes the attribute entirely. |
| rounded | KunUIRounded | — | Corner radius. Left unset it follows the app-wide config (default `md`) so every KunUI surface shares one radius. |
| size | KunUISize | "md" | Height, padding and font size. It is the shared form-control scale, so a button lines up with an input or select of the same `size`. |
| target | "_self" | "_blank" | "_parent" | "_top" | "_self" | Link target — link mode only. `_blank` also picks a safe default `rel`. |
| type | "button" | "submit" | "reset" | "button" | Native `type` of the rendered `<button>` — `submit` is what makes a button submit its surrounding form. Ignored in link mode (`href`). |
| variant | KunUIVariant | "solid" | Visual style: `solid` filled, `bordered` outline, `light` text-only with a tinted hover, `flat` a soft tint, `shadow` filled with elevation. |
事件
| 事件 | 回调参数 |
|---|---|
| click | event: MouseEvent |
插槽
| 插槽 | 作用域 |
|---|---|
| #default | — |
| #icon | — |