Button Phase

🏅Original

Sci-Fi Button - Phase is a status-indicator component within the TechUI Tui Button series.

It introduces a unique "Phase Bar" design language. Unlike standard buttons with uniform background fills, its visual core features a floating highlighted color block inside the button.

The component includes 6 different phase styles (A-F), covering various forms such as top-mounted, bottom-supported, and side-indexed. This highlight block is more than just decoration; it acts as a status cursor, allowing for precise control over its position and thickness via parameters.

Tip: This component can be invoked using TuiButtonA3 or its semantic alias TuiButtonPhase.

Basic Usage

The default is Type A Phase, which presents a standard basic bottom highlight bar effect and supports highly customizable corner radius settings.

vue

<template>
  <div class="demo-row">
    <TuiButtonPhase>Default</TuiButtonPhase>
    <TuiButtonPhase type="primary">Primary</TuiButtonPhase>
    <TuiButtonPhase type="success">Success</TuiButtonPhase>
    <TuiButtonPhase type="warning">Warning</TuiButtonPhase>
    <TuiButtonPhase type="danger">Danger</TuiButtonPhase>
    <TuiButtonPhase type="emphasis">Emphasis</TuiButtonPhase>
  </div>
  <div class="demo-row">
    <TuiButtonPhase plain>Plain Default</TuiButtonPhase>
    <TuiButtonPhase type="primary" plain>Plain Primary</TuiButtonPhase>
    <TuiButtonPhase type="info" plain>Plain Info</TuiButtonPhase>
  </div>
</template>

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

Diverse Styles

Switch between Type A-J effects using the decoType attribute to display floating highlight bars in different directions:
A: South (Bottom)
B: North (Top)
C: West (Left)
D: East (Right)
E: North-South
F: East-West

vue

<template>
  <div class="demo-label">Type B</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="B">Default</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="invert">Invert</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="primary" icon="tui-icon ti-star">Primary</TuiButtonPhase>
  </div>

  <div class="demo-label">Type C</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="C" type="success">Type C Success</TuiButtonPhase>
    <TuiButtonPhase decoType="C" plain type="warning">Type C Plain</TuiButtonPhase>
    <TuiButtonPhase decoType="C" type="primary" size="small" :borderRadius="10">Small Radius</TuiButtonPhase>
  </div>

  <div class="demo-label">Type D</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="D" type="danger">Type D Danger</TuiButtonPhase>
    <TuiButtonPhase decoType="D" type="emphasis">Type D Emphasis</TuiButtonPhase>
  </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>

vue

<template>
  <div class="demo-label">Type E - Offset & Thickness</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="E" type="info" :decoThickness="6">Thick Bar</TuiButtonPhase>
    <TuiButtonPhase decoType="E" type="primary" :decoOffset="20">Offset 20</TuiButtonPhase>
    <TuiButtonPhase decoType="E" type="primary" :decoOffset="40">Offset 40</TuiButtonPhase>
  </div>

  <div class="demo-label">Type F - Mixed Config</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="F" type="emphasis" :decoOffset="0">No Offset</TuiButtonPhase>
    <TuiButtonPhase decoType="F" type="success" :decoOffset="8">Offset 8</TuiButtonPhase>
    <TuiButtonPhase decoType="F" type="warning" size="small" :decoOffset="2">Small Offset</TuiButtonPhase>
  </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>

Border Radius Control

TuiButtonPhase supports flexible control of the corner radius via the borderRadius attribute, adapting from right angles to full rounded corners.

vue

<template>
  <div class="demo-label">Border Radius Control (borderRadius)</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="A" type="primary" :borderRadius="50">Radius 50</TuiButtonPhase>
    <TuiButtonPhase decoType="B" type="success" :borderRadius="10">Radius 10</TuiButtonPhase>
    <TuiButtonPhase decoType="C" type="warning" :borderRadius="0">Radius 0</TuiButtonPhase>
  </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>

Status Display

Supports disabled and plain states. In the disabled state, the internal phase highlight bar will automatically turn gray or reduce in transparency.

vue

<template>
  <div class="demo-label">Disabled State</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="A" disabled>Disabled A</TuiButtonPhase>
    <TuiButtonPhase decoType="B" disabled type="primary">Disabled B</TuiButtonPhase>
    <TuiButtonPhase decoType="C" disabled plain type="warning">Disabled C Plain</TuiButtonPhase>
    <TuiButtonPhase decoType="D" disabled plain type="danger">Disabled D Plain</TuiButtonPhase>
  </div>
  
  <div class="demo-label">Custom Color</div>
  <div class="demo-row">
    <TuiButtonPhase decoType="E" customColor="#8a2be2">Custom E</TuiButtonPhase>
    <TuiButtonPhase decoType="A" plain customColor="#00ced1">Custom A Plain</TuiButtonPhase>
  </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>

API Reference

Props

TuiButtonPhase inherits some common attributes 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 loading	`boolean`	-	`false`
size	Size	`string`	`large` / `small`	-
icon	Icon class name	`string`	-	-
customColor	Custom color	`string` / `Array`	-	-

The following are attributes unique to this component.

Parameter	Description	Type	Optional Values	Default Value	Applicable Type
decoType	Phase style type	`string`	`A` / `B` / `C` / `D` / `E` / `F`	`A`	All
borderRadius	Border corner radius size	`number`	-	-	All
decoOffset	Phase bar offset/position	`number`	-	-	E, F
decoThickness	Phase bar thickness	`number`	-	-	E

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)`

Button Phase ​

Basic Usage ​

Diverse Styles ​

Border Radius Control ​

Status Display ​

API Reference ​

Props ​

Slots ​

Events ​