@xwink/ui

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 变体,不再单独成组件。

五种变体

L0 内联写法(正文里直接 MDC):

尺寸

五种尺寸

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 危险操作
blockboolean | undefinedfalse占满父容器宽度
disabledboolean | undefinedfalse
loadingboolean | undefinedfalse
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size

Slots

插槽说明
default