Button Glyph 图元

🏅原创

科幻按钮-图元 是 TechUI Tui Button 系列中的图标增强型组件。

它专为 “图标 + 文本 (Icon + Label)” 的组合形态而生。与普通按钮仅将图标作为点缀不同，该组件强制（或强烈建议）配置图标，并将图标视为具有独立语义的 “功能图元 (Functional Glyph)”。

这种强化视觉层级的设计，使其非常适合用于 工具栏 (Toolbar)、带有明确语义的操作项（如：保存、删除、上传）或 功能菜单，能够极大提升用户对按钮功能的识别效率。

提示：该组件可以通过 TuiButtonB1 或其语义化别名 TuiButtonGlyph 进行调用。

分割线风格

默认为 A型图元。特征：在图标与文本之间增加了一条垂直分割线，将两者在视觉上进行轻度隔离，适合功能明确的工具栏按钮。

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph type="primary" icon="tui-icon ti-settings">Primary</TuiButtonGlyph>
    <TuiButtonGlyph type="success" icon="tui-icon ti-check">Success</TuiButtonGlyph>
    <TuiButtonGlyph type="danger" icon="tui-icon ti-close">Danger</TuiButtonGlyph>
  </div>
  
  <div class="demo-row">
    <TuiButtonGlyph plain icon="tui-icon ti-home">Plain Default</TuiButtonGlyph>
    <TuiButtonGlyph plain type="warning" icon="tui-icon ti-alert">Plain Warning</TuiButtonGlyph>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

独立边框风格

通过设置 decoType="B" 启用。特征：图标被一个独立的矩形镂空框包裹，与文本区域形成明确的模块区分，机械感较强。

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph decoType="B" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="invert" icon="tui-icon ti-search">Invert</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="primary" icon="tui-icon ti-star">Primary</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="info" icon="tui-icon ti-info">Info</TuiButtonGlyph>
  </div>

  <div class="demo-row">
    <TuiButtonGlyph decoType="B" plain type="emphasis" icon="tui-icon ti-bolt">Emphasis</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" plain type="success" icon="tui-icon ti-check">Success</TuiButtonGlyph>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

胶囊/圆形风格

通过设置 decoType="C" 启用。特征：是 Type B 的变体，将矩形边框改为圆形或胶囊形（取决于整体圆角设置），视觉更加柔和。

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph decoType="C" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" type="primary" icon="tui-icon ti-user">User</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" type="success" icon="tui-icon ti-check">Done</TuiButtonGlyph>
  </div>
  
  <div class="demo-row">
    <TuiButtonGlyph decoType="C" plain type="danger" icon="tui-icon ti-lock">Locked</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" plain type="warning" icon="tui-icon ti-bell">Notice</TuiButtonGlyph>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

图标位置

通过 iconPosition 属性控制图标的显示位置。

start (默认): 图标在左侧。
end: 图标在右侧。

vue

<template>
  <div class="demo-label">Start (Default) vs End</div>
  <div class="demo-row">
    <TuiButtonGlyph type="primary" icon="tui-icon ti-arrow-left">Prev</TuiButtonGlyph>
    
    <TuiButtonGlyph type="primary" iconPosition="end" icon="tui-icon ti-arrow-right">Next</TuiButtonGlyph>
    
    <TuiButtonGlyph decoType="B" type="emphasis" iconPosition="end" icon="tui-icon ti-export">Export</TuiButtonGlyph>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
</style>

尺寸与状态

支持 size (large/small) 与 disabled 状态。

decoOffset: 可用于微调图标区域与文本区域的间距。

vue

<template>
  <div class="demo-label">Sizes</div>
  <div class="demo-row">
    <TuiButtonGlyph size="large" type="primary" icon="tui-icon ti-home">Large</TuiButtonGlyph>
    <TuiButtonGlyph type="primary" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph size="small" type="primary" icon="tui-icon ti-home">Small</TuiButtonGlyph>
  </div>

  <div class="demo-label">Disabled State</div>
  <div class="demo-row">
    <TuiButtonGlyph decoType="A" disabled icon="tui-icon ti-home">Disabled A</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" disabled type="primary" icon="tui-icon ti-settings">Disabled B</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" disabled plain type="warning" icon="tui-icon ti-alert">Disabled C</TuiButtonGlyph>
  </div>
</template>

<style scoped>
.demo-label {
  font-size: 12px;
  color: var(--vp-c-text-2);
  margin: 10px 0 5px;
}
.demo-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
</style>

API 参考

Props

TuiButtonGlyph 继承了基础 TuiButton 的通用属性。

参数	说明	类型	可选值	默认值
type	按钮类型 (颜色主题)	`string`	`default` / `invert` / `focus` / `info` / `primary` / `success` / `warning` / `danger` / `emphasis`	`default`
plain	是否为朴素按钮	`boolean`	-	`false`
disabled	是否禁用	`boolean`	-	`false`
size	尺寸	`string`	`large` / `small`	-
icon	图标类名 (必须)	`string`	-	-
customColor	自定义颜色	`string` / `Array`	-	-

以下是该组件特有的属性。

参数	说明	类型	可选值	默认值	适用类型
decoType	图元风格类型	`string`	`A` (分割线) / `B` (方框) / `C` (圆框)	`A`	All
iconPosition	图标位置	`string`	`start` / `end`	`start`	All
decoOffset	图标与文本的间距修正	`number`	-	-	All

Slots

插槽名	说明
default	按钮文本内容
icon	图标插槽 (若需自定义 SVG 等复杂图标)

Events

事件名	说明	回调参数
click	点击按钮时触发	`(event: Event)`

Button Glyph 图元 ​

分割线风格 ​

独立边框风格 ​

胶囊/圆形风格 ​

图标位置 ​

尺寸与状态 ​

API 参考 ​

Props ​

Slots ​

Events ​