Button Mutant

🏅Original

Scifi Button - Mutant is a polymorphic decorative component within the TechUI Tui Button series.

Built upon the architecture of standard base buttons, it injects "Geometric Mutation" design genes. Rather than relying on heavy SVG backgrounds, it achieves three distinct edge morphological evolutions through high-precision CSS clipping and decoration.

Visually, the component provides three core variants: A, B, and C:

Each variant supports fine-grained parametric geometric control. This design makes it more lightweight and agile than the heavy-duty buttons in the Scifi series, making it ideal for high-frequency interaction areas (such as table operation columns or form submission groups) or dense toolbars. It maintains an overall sci-fi atmosphere while avoiding visual overcrowding.

Note: This component can be invoked via TuiButtonA1 or its semantic alias TuiButtonMutant.

Double-Line Decoration

Type A Mutant retains a relatively regular appearance but changes the border treatment to a double-line border.

• Supported Parameters: Supports the borderRadius parameter to control the corner radius (e.g., set to 0 for right angles).

<template>
  <div class="demo-label">Base Style</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">Custom Border Radius (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>

Directional Decoration

Enabled by setting decoType="B". Type B Mutant features distinct directional triangular characteristics and corner embellishments.

• Supported Parameters:
• decoDirection: Controls the direction of the clipped corner (tl, tr, bl, br).
• decoOffset: Controls the depth/offset of the clipped corner.
• decoSize: Controls the size of the corner decoration.
• borderRadius: Remains effective; can coexist with clipped corners or be set to 0 to enhance the mechanical feel.

<template>
  <div class="demo-label">Clipping Direction (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">Depth and Size Control</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>

Corner Guard Decoration

Enabled by setting decoType="C". Type C Mutant adopts a design similar to corner guards, where the border breaks and wraps around the content.

• Supported Parameters:
• decoThickness: Controls the thickness of the bracket lines.
• decoOffset: Controls the spacing/offset between the brackets and the content.
• decoSize: Controls the length (coverage range) of the brackets.

<template>
  <div class="demo-label">Basic Brackets</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">Geometric Parameter Adjustment</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>

Sizes and States

All variants support size (large/small) and the disabled state.

<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 Reference

Props

TuiButtonMutant inherits some general properties from the base TuiButton.

Parameter	Description	Type	Optional Values	Default Value
type	Button type (Color theme)	string	default / invert / focus / info / primary / success / warning / danger / emphasis	default
plain	Whether it is a plain button	boolean	-	false
disabled	Whether it is disabled	boolean	-	false
loading	Whether it is in a loading state	boolean	-	false
size	Size	string	large / small	-
icon	Icon class name	string	-	-
customColor	Custom color	string / Array	-	-
native-type	Native button type	string	button / submit / reset	button

The following are geometric control parameters unique to this component.

Note: Different decoType values have different levels of support for these parameters; please refer to the "Applicable Types" column.

Parameter	Description	Type	Optional Values	Default Value	Applicable Types
decoType	Decoration variant type	string	A / B / C	A	All
borderRadius	Border corner radius	number	-	-	A, B
decoDirection	Direction of clipping and decoration	string	tl / tr / bl / br	br	B
decoOffset	Offset/depth of decorative elements	number	-	-	B, C
decoSize	Size/length of decorative elements	number	-	-	B, C
decoThickness	Thickness of decorative lines	number	-	-	C

Slots

Slot Name	Description
default	Button content
icon	Icon slot

Events

Event Name	Description	Callback Parameters
click	Triggered when the button is clicked	(event: Event)