Button

通用操作按钮。默认不换行：按钮宽度该由文案决定，容器挤不下时应当压缩别的元素或让按钮溢出，而不是把「新建 Agent」折成两行——工具栏里那是最先被牺牲、也最先被看见的可读性。

高度走 --ui-control-height，与输入框 / 下拉在同一行天然等高；尺寸由 size prop（mini / small / medium / large / super）或宿主标 data-size="small" 全局紧凑切换（试试右上角调试面板），组件不感知具体档位。

type 支持原生的 button | submit | reset，默认是不会误触发表单提交的 button；在 XForm 中使用 type="submit" 发起整表校验与提交。

变体

outline 常规操作 / primary 主操作 / gradient 品牌强调 / ghost 轻量操作 / danger 危险操作。品牌渐变按钮是 gradient 变体，不再单独成组件。

五种变体

缺省不悬停上移：上移是落地页、登录这类展示页的动效语言，工具界面按钮密、一悬停就晃。展示型站点在应用根上 provideUiDefaults({ XButton: { lift: true } }) 整站打开（单个按钮也可给 lift）；工具条在自己这层仍关掉。

L0 内联写法（正文里直接 MDC）：

换色

color 换主色实底与渐变的颜色：primary（缺省，跟宿主主色）/ danger / success / warning / info 换成对应语义 token、跟着明暗档走；十六进制按品牌色算法算出前景与深一档，明暗共用。规则见主题 token → 换色。

语义色与十六进制

尺寸

五种尺寸

Loading 与禁用

loading 时禁用点击并出旋转指示，:disabled="disabled || loading" 同一语义：

loading / 禁用

API

Props

名称	类型	默认值	说明
`type`	`"button" \| "submit" \| "reset" \| undefined`	`"button"`	—
`variant`	`"primary" \| "danger" \| "outline" \| "gradient" \| "ghost" \| undefined`	`"outline"`	outline 常规操作 / primary 主操作 / gradient 品牌强调 / ghost 轻量操作 / danger 危险操作
`block`	`boolean \| undefined`	`false`	占满父容器宽度
`disabled`	`boolean \| undefined`	`false`	—
`loading`	`boolean \| undefined`	`false`	—
`href`	`string \| undefined`	`undefined`	给了就渲染成 `<a>`:导航按钮要能中键 / ⌘ 点开新标签页、右键复制链接
`asChild`	`boolean \| undefined`	`false`	样式交给插槽里唯一的子元素(`RouterLink` / `NuxtLink`),本包不依赖路由库;此时不画 loading 转圈
`lift`	`boolean \| undefined`	`false`	悬停上移 1px,缺省关:上移是落地页、登录这类展示页的动效语言,工具界面按钮密、一悬停就晃。展示型站点在应用根上经 `XConfigProvider` / `provideUiDefaults({ XButton: { lift: true } })` 整站打开
`icon`	`string \| boolean \| undefined`	`false`	纯图标按钮(同 Vuetify `VBtn` 的 `icon`):给图标名由按钮自己画,给 `true` 只开形态、图标放插槽。开着时宽 = 高(缺省是控件高, 宿主拉伸高度时宽跟着变)、没有左右内边距,跟档位走。显式开关而不从插槽里猜:`v-if`、包了一层的图标、空白文字节点都会让猜测出错。没有可见文字,读屏名由宿主给 `aria-label`
`size`	`"mini" \| "small" \| "medium" \| "large" \| "super" \| undefined`	`undefined`	尺寸：mini / small / medium(默认) / large / super；不传则跟随环境 data-size
`color`	`UiColor \| undefined`	`undefined`	色块颜色:`primary`(缺省,跟宿主主色)/ `danger` / `success` / `warning` / `info`,或十六进制 `#rrggbb`

Slots

插槽	说明
`default`	—