Button 按钮

TuiButton 是一个基于 Vue 3 的轻量级按钮组件。它通过 type 属性提供了一套完整的语义化配色方案，并支持 plain、round、circle 等多种外观修饰符。该组件内置了 Loading 状态管理与 Disabled 逻辑，支持自定义 HEX 颜色注入，旨在为开发者提供开箱即用且高度可配置的按钮解决方案。

基础用法

使用 type 属性定义按钮的颜色类型。TechUI 提供了多种预设的语义化颜色。

vue

<template>
  <div class="demo-row">
    <TuiButton>Default</TuiButton>
    <TuiButton type="invert">Invert</TuiButton>
    <TuiButton type="focus">Focus</TuiButton>
    <TuiButton type="info">Info</TuiButton>
    <TuiButton type="primary">Primary</TuiButton>
    <TuiButton type="success">Success</TuiButton>
    <TuiButton type="warning">Warning</TuiButton>
    <TuiButton type="danger">Danger</TuiButton>
    <TuiButton type="emphasis">Emphasis</TuiButton>
  </div>
  <div class="demo-row">
    <TuiButton icon="tui-icon ti-cog">With Icon</TuiButton>
    <TuiButton type="primary" icon="tui-icon ti-star">With Icon</TuiButton>
  </div>
</template>

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

朴素按钮 Plain

使用 plain 属性将按钮设置为朴素样式（背景色透明或变淡，边框显色）。

vue

<template>
  <div class="demo-row">
    <TuiButton plain>Default</TuiButton>
    <TuiButton type="invert" plain>Invert</TuiButton>
    <TuiButton type="focus" plain>Focus</TuiButton>
    <TuiButton type="info" plain>Info</TuiButton>
    <TuiButton type="primary" plain>Primary</TuiButton>
    <TuiButton type="success" plain>Success</TuiButton>
    <TuiButton type="warning" plain>Warning</TuiButton>
    <TuiButton type="danger" plain>Danger</TuiButton>
    <TuiButton type="emphasis" plain>Emphasis</TuiButton>
  </div>
</template>

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

圆角按钮 Round

使用 round 属性来定义圆角按钮。

vue

<template>
  <div class="demo-row">
    <TuiButton round>Default</TuiButton>
    <TuiButton type="primary" round>Primary</TuiButton>
    <TuiButton type="success" round>Success</TuiButton>
    <TuiButton type="warning" round>Warning</TuiButton>
    <TuiButton type="danger" round>Danger</TuiButton>
  </div>
  <div class="demo-row">
    <TuiButton type="primary" plain round>Plain Round</TuiButton>
    <TuiButton type="success" plain round>Plain Round</TuiButton>
  </div>
</template>

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

圆形图标 Circle

使用 circle 属性，通常配合 icon 使用，用于显示圆形图标按钮。

vue

<template>
  <div class="demo-row">
    <TuiButton icon="tui-icon ti-star" circle />
    <TuiButton type="primary" icon="tui-icon ti-search" circle />
    <TuiButton type="success" icon="tui-icon ti-check" circle />
    <TuiButton type="warning" icon="tui-icon ti-alert" circle />
    <TuiButton type="danger" icon="tui-icon ti-close" circle />
  </div>
  <div class="demo-row">
    <TuiButton type="primary" icon="tui-icon ti-pencil" circle plain />
    <TuiButton type="danger" icon="tui-icon ti-trash" circle plain />
  </div>
</template>

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

链接与文字按钮 Link & Text

link: 表现为链接样式，无背景，Hover 时有下划线或颜色变化。
text: 表现为纯文本按钮，无边框。
textWithBG: 文字按钮在特定状态下是否保留背景色。

vue

<template>
  <div class="title">Link 模式</div>
  <div class="demo-row">
    <TuiButton link>Default</TuiButton>
    <TuiButton type="primary" link>Primary</TuiButton>
    <TuiButton type="success" link>Success</TuiButton>
    <TuiButton type="warning" link>Warning</TuiButton>
    <TuiButton type="danger" link>Danger</TuiButton>
  </div>

  <div class="title">Text 模式</div>
  <div class="demo-row">
    <TuiButton text>Text Default</TuiButton>
    <TuiButton type="primary" text>Text Primary</TuiButton>
    <TuiButton type="danger" text>Text Danger</TuiButton>
  </div>
  
  <div class="title">Text (Background Always On)</div>
  <div class="demo-row">
    <TuiButton text textWithBG>BG On</TuiButton>
    <TuiButton type="primary" text textWithBG>BG On</TuiButton>
  </div>
</template>

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

状态 Disabled & Loading

disabled: 禁用状态，不可点击。
loading: 加载中状态，会自动显示 loading 图标并禁用点击。

vue

<template>
  <div class="demo-row">
    <TuiButton disabled>Disabled</TuiButton>
    <TuiButton type="primary" disabled>Disabled</TuiButton>
    <TuiButton type="primary" plain disabled>Disabled Plain</TuiButton>
    <TuiButton type="primary" link disabled>Disabled Link</TuiButton>
  </div>
  <div class="demo-row">
    <TuiButton loading>Loading</TuiButton>
    <TuiButton type="primary" loading>Submitting</TuiButton>
    <TuiButton type="success" plain loading circle></TuiButton>
  </div>
</template>

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

尺寸 Size

支持 large, default (不填), small 三种尺寸。

vue

<template>
  <div class="demo-row">
    <TuiButton type="primary" size="large">Large</TuiButton>
    <TuiButton type="primary">Default</TuiButton>
    <TuiButton type="primary" size="small">Small</TuiButton>
  </div>
  <div class="demo-row">
    <TuiButton type="primary" round size="large">Large</TuiButton>
    <TuiButton type="primary" round>Default</TuiButton>
    <TuiButton type="primary" round size="small">Small</TuiButton>
  </div>
</template>

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

自定义颜色

通过 customColor 属性，可以传入 Hex 颜色值来强制覆盖按钮的主色调。

vue

<script setup>
import { $c } from "@techui/colors"; // 假设这是内部颜色库，演示用
const customHex = '#8a2be2'; // BlueViolet
</script>

<template>
  <div class="demo-row">
    <TuiButton :customColor="customHex">Custom Hex</TuiButton>
    
    <TuiButton plain :customColor="customHex">Custom Plain</TuiButton>
    
    <TuiButton round :customColor="customHex">Custom Round</TuiButton>
  </div>
</template>

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

按钮组

使用 <TuiButtonGroup> 容器将多个按钮组合在一起。

vue

<template>
  <div class="demo-col">
    <TuiButtonGroup>
      <TuiButton type="primary">Prev</TuiButton>
      <TuiButton type="primary">Next</TuiButton>
    </TuiButtonGroup>

    <TuiButtonGroup>
      <TuiButton type="default" icon="tui-icon ti-star">Star</TuiButton>
      <TuiButton type="default" icon="tui-icon ti-share">Share</TuiButton>
      <TuiButton type="default" icon="tui-icon ti-pencil">Edit</TuiButton>
    </TuiButtonGroup>

    <TuiButtonGroup vertical>
      <TuiButton type="primary" icon="tui-icon ti-plus"></TuiButton>
      <TuiButton type="primary" icon="tui-icon ti-minus"></TuiButton>
    </TuiButtonGroup>
  </div>
</template>

<style scoped>
.demo-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
</style>

API 参考

Props

参数	说明	类型	可选值	默认值
type	按钮类型 (颜色主题)	`string`	`default` / `invert` / `focus` / `info` / `primary` / `success` / `warning` / `danger` / `emphasis`	`default`
plain	是否为朴素按钮	`boolean`	-	`false`
round	是否为圆角按钮	`boolean`	-	`false`
circle	是否为圆形按钮	`boolean`	-	`false`
link	是否为链接按钮	`boolean`	-	`false`
text	是否为文字按钮	`boolean`	-	`false`
textWithBG	文字按钮是否保留背景	`boolean`	-	`false`
disabled	是否禁用	`boolean`	-	`false`
loading	是否加载中	`boolean`	-	`false`
size	尺寸	`string`	`large` / `small`	-
icon	图标类名	`string`	-	-
customColor	自定义颜色	`string` / `Array`	-	-
native-type	原生 button 类型	`string`	`button` / `submit` / `reset`	`button`

Slots

插槽名	说明
default	按钮内容
icon	图标插槽 (若不使用 icon 属性)

Events

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

Button 按钮 ​

基础用法 ​

朴素按钮 Plain ​

圆角按钮 Round ​

圆形图标 Circle ​

链接与文字按钮 Link & Text ​

状态 Disabled & Loading ​

尺寸 Size ​

自定义颜色 ​

按钮组 ​

API 参考 ​

Props ​

Slots ​

Events ​