Button Mutant 突变体

🏅原创

科幻按钮-突变 是 TechUI Tui Button 系列中的多态装饰型组件。

它在标准基础按钮的架构之上，注入了 “几何突变 (Geometric Mutation)” 的设计基因。它并不依赖繁重的 SVG 背景，而是通过高精度的 CSS 裁剪与装饰，实现了三种截然不同的边缘形态演化。

从视觉上看，该组件提供了 A/B/C 三种核心变体：

每种变体都支持精细的参数化几何控制。这种设计使其比 Scifi 系列的重型按钮更加轻量灵动，非常适合用于 高频交互区域（如表格操作列、表单提交组）或 密集工具栏，在保持整体科幻氛围的同时，避免视觉上的过度拥挤。

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

双线修饰 Type A

A型突变保留了较为规整的外观，但在边框处理上改为了双线边框。

支持参数：支持 borderRadius 参数来控制圆角大小（例如设置为 0 变成直角）。

vue

<template>
  <div class="demo-label">基础样式</div>
  <div class="demo-row">
    <TuiButtonMutant>Default</TuiButtonMutant>
    <TuiButtonMutant type="primary">Primary</TuiButtonMutant>
    <TuiButtonMutant type="success">Success</TuiButtonMutant>
    <TuiButtonMutant type="danger">Danger</TuiButtonMutant>
  </div>

  <div class="demo-label">自定义圆角 (borderRadius)</div>
  <div class="demo-row">
    <TuiButtonMutant type="primary" :borderRadius="0">Radius 0</TuiButtonMutant>
    <TuiButtonMutant type="warning" :borderRadius="0" plain>Plain Radius 0</TuiButtonMutant>
    <TuiButtonMutant type="emphasis" :borderRadius="10">Radius 10</TuiButtonMutant>
  </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>

指向修饰 Type B

通过设置 decoType="B" 启用。 B型突变 具有显著的指向性三角特征，并带有角落的点缀装饰。

支持参数：
decoDirection: 控制切角方向 (tl, tr, bl, br)。
decoOffset: 控制切角的深度/偏移量。
decoSize: 控制角标装饰的大小。
borderRadius: 依然有效，可与切角共存或设为0增强机械感。

vue

<template>
  <div class="demo-label">切角方向 (decoDirection)</div>
  <div class="demo-row">
    <TuiButtonMutant decoType="B" type="primary">Default (br)</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="success" decoDirection="bl">Bottom Left</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="warning" decoDirection="tl">Top Left</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="danger" decoDirection="tr">Top Right</TuiButtonMutant>
  </div>
  
  <div class="demo-label">深度与尺寸控制</div>
  <div class="demo-row">
    <TuiButtonMutant decoType="B" type="primary" :decoOffset="10" :borderRadius="0">Deep Cut</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="emphasis" :decoSize="6">Big Deco</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="info" size="small" :decoSize="2" :borderRadius="0">Small Details</TuiButtonMutant>
    <TuiButtonMutant decoType="B" type="info" plain>plain</TuiButtonMutant>
  </div>
</template>

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

护角修饰 Type C

通过设置 decoType="C" 启用。 C型突变 采用了类似护角修饰的设计，边框断开并包裹内容。

支持参数：
decoThickness: 控制括弧线条的粗细。
decoOffset: 控制括弧与内容的间距/偏移。
decoSize: 控制括弧的长度（覆盖范围）。

vue

<template>
  <div class="demo-label">基础括弧</div>
  <div class="demo-row">
    <TuiButtonMutant decoType="C">Default</TuiButtonMutant>
    <TuiButtonMutant decoType="C" type="primary">Primary</TuiButtonMutant>
    <TuiButtonMutant decoType="C" type="success" plain>Success Plain</TuiButtonMutant>
  </div>
  
  <div class="demo-label">几何参数调整</div>
  <div class="demo-row">
    <TuiButtonMutant decoType="C" type="warning" :decoThickness="3">Thick Line</TuiButtonMutant>
    <TuiButtonMutant decoType="C" type="danger" :decoOffset="6">Large Offset</TuiButtonMutant>
    <TuiButtonMutant decoType="C" type="emphasis" :decoSize="12">Long Bracket</TuiButtonMutant>
    <TuiButtonMutant decoType="C" type="emphasis" :decoSize="12" plain>plain</TuiButtonMutant>
  </div>
</template>

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

尺寸与状态

所有变体均支持 size (large/small) 与 disabled 状态。

vue

<template>
  <div class="demo-row">
    <TuiButtonMutant decoType="A" size="large" type="primary">Large A</TuiButtonMutant>
    <TuiButtonMutant decoType="B" disabled type="primary">Disabled B</TuiButtonMutant>
    <TuiButtonMutant decoType="C" size="small" plain type="warning">Small C</TuiButtonMutant>
  </div>
</template>

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

API 参考

Props

TuiButtonMutant 继承了基础 TuiButton 的部分通用属性。

参数	说明	类型	可选值	默认值
type	按钮类型 (颜色主题)	`string`	`default` / `invert` / `focus` / `info` / `primary` / `success` / `warning` / `danger` / `emphasis`	`default`
plain	是否为朴素按钮	`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`

以下是该组件特有的几何控制参数。

注意：不同的 decoType 对参数的支持度不同，请参考"适用类型"一列。

参数	说明	类型	可选值	默认值	适用类型
decoType	装饰变体类型	`string`	`A` / `B` / `C`	`A`	All
borderRadius	边框圆角大小	`number`	-	-	A, B
decoDirection	切角与装饰方向	`string`	`tl` / `tr` / `bl` / `br`	`br`	B
decoOffset	装饰元素的偏移量/深度	`number`	-	-	B, C
decoSize	装饰元素的尺寸/长度	`number`	-	-	B, C
decoThickness	装饰线条的粗细	`number`	-	-	C

Slots

插槽名	说明
default	按钮内容
icon	图标插槽

Events

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

Button Mutant 突变体 ​

双线修饰 Type A ​

指向修饰 Type B ​

护角修饰 Type C ​

尺寸与状态 ​

API 参考 ​

Props ​

Slots ​

Events ​