Button

TuiButton is a lightweight button component based on Vue 3. It provides a complete set of semantic color schemes through the type attribute and supports various appearance modifiers such as plain, round, and circle. The component features built-in loading state management and disabled logic, while also supporting custom HEX color injection, aiming to provide developers with an out-of-the-box yet highly configurable button solution.

Basic Usage

Use the type attribute to define the color type of the button. TechUI provides a variety of preset semantic colors.

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 Button

Use the plain attribute to set the button to a plain style (transparent or lightened background with a colored border).

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 Button

Use the round attribute to define a rounded button.

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 Button

Use the circle attribute, typically in conjunction with icon, to display a circular icon button.

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 Buttons

link: Behaves like a link, with no background and an underline or color change on hover.
text: Behaves as a pure text button with no border.
textWithBG: Whether the text button retains its background color in specific states.

vue

<template>
  <div class="title">Link Mode</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 Mode</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>

States: Disabled & Loading

disabled: Disabled state, not clickable.
loading: Loading state, automatically displays a loading icon and disables interaction.

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

Supports three sizes: large, default (empty), and 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>

Custom Color

By using the customColor attribute, you can pass a Hex color value to force-override the button's primary theme color.

vue

<script setup>
import { $c } from "@techui/colors"; // Assuming this is an internal library for demo purposes
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>

Button Group

Use the <TuiButtonGroup> container to group multiple buttons together.

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 Reference

Props

Property	Description	Type	Accepted Values	Default
type	Button type (Color theme)	`string`	`default` / `invert` / `focus` / `info` / `primary` / `success` / `warning` / `danger` / `emphasis`	`default`
plain	Whether the button is plain	`boolean`	-	`false`
round	Whether the button is rounded	`boolean`	-	`false`
circle	Whether the button is circular	`boolean`	-	`false`
link	Whether the button is a link button	`boolean`	-	`false`
text	Whether the button is a text button	`boolean`	-	`false`
textWithBG	Whether text button retains background	`boolean`	-	`false`
disabled	Whether the button is disabled	`boolean`	-	`false`
loading	Whether the button is in loading state	`boolean`	-	`false`
size	Button size	`string`	`large` / `small`	-
icon	Icon class name	`string`	-	-
customColor	Custom color	`string` / `Array`	-	-
native-type	Native button type	`string`	`button` / `submit` / `reset`	`button`

Slots

Slot Name	Description
default	Button content
icon	Icon slot (if not using the icon property)

Events

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

Button ​

Basic Usage ​

Plain Button ​

Round Button ​

Circle Button ​

Link & Text Buttons ​

States: Disabled & Loading ​

Size ​

Custom Color ​

Button Group ​

API Reference ​

Props ​

Slots ​

Events ​