Admin 元件
Button
觸發動作的按鈕。尺寸 medium／small；樣式 filled／outline／ghost。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/buttonimport { AdminButton } from '@/components/admin/button'用法
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'</script><template> <div class="flex items-center gap-3"> <admin-button>Primary</admin-button> <admin-button variant="outline">Outline</admin-button> <admin-button variant="ghost">Ghost</admin-button> </div></template>場景
尺寸
尺寸：medium（預設）、small。
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'</script><template> <div class="flex items-center gap-3"> <admin-button size="medium">Medium</admin-button> <admin-button size="small">Small</admin-button> </div></template>樣式
variant：filled／outline／ghost；disabled 為停用。
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'</script><template> <div class="flex items-center gap-3"> <admin-button variant="filled">Filled</admin-button> <admin-button variant="outline">Outline</admin-button> <admin-button variant="ghost">Ghost</admin-button> <admin-button disabled>Disabled</admin-button> </div></template>顏色
color：primary（預設）、secondary；可與任一 variant 組合。
<script setup lang="ts">import { AdminButton } from '@/components/admin/button'</script><template> <div class="flex flex-col gap-4"> <div class="flex items-center gap-3"> <admin-button color="primary" variant="filled">Primary Filled</admin-button> <admin-button color="primary" variant="outline">Primary Outline</admin-button> <admin-button color="primary" variant="ghost">Primary Ghost</admin-button> </div> <div class="flex items-center gap-3"> <admin-button color="secondary" variant="filled">Secondary Filled</admin-button> <admin-button color="secondary" variant="outline">Secondary Outline</admin-button> <admin-button color="secondary" variant="ghost">Secondary Ghost</admin-button> </div> </div></template>API 參考
組成
<template> <admin-button>按鈕文字</admin-button></template>admin-button
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "filled" | "outline" | "ghost" | undefined | — | 視覺樣式變體 |
size | "small" | "medium" | undefined | — | 按鈕尺寸 |
color | "primary" | "secondary" | "text" | undefined | — | 主色系（影響背景與邊框顏色）；`text` 為 ghost variant 專屬色階，其他 variant 下無對應樣式 |
class | ClassValue | — | 根元素之自訂 class |
disabled | boolean | undefined | — | 設為 `true` 時禁用按鈕並套用視覺停用樣式 |
type | "reset" | "submit" | "button" | undefined | — | 原生 `type` 屬性；未指定時瀏覽器預設為 `submit`，表單內之工具按鈕請設為 `button` |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "button" | The element or component this component should render as. Can be overwritten by `asChild`. |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
注意事項
color="text"為 ghost 專屬：text色階僅在variant="ghost"下有對應樣式（toolbar / dropdown trigger 等次要 icon-only action 場景）；搭配filled／outline時無效果，渲染同該 variant 預設色。- 表單內請設
type="button"：原生type未指定時瀏覽器預設為submit，放在<form>內的工具按鈕會觸發表單送出。