Button Glyph Component

🏅Original

Sci-fi Button - Glyph is an icon-enhanced component within the TechUI Tui Button series.

It is specifically designed for the "Icon + Label" combined form. Unlike standard buttons where icons serve as mere embellishments, this component enforces (or strongly recommends) icon configuration and treats the icon as a "Functional Glyph" with independent semantics.

This design strengthens the visual hierarchy, making it highly suitable for toolbars, action items with clear semantics (e.g., Save, Delete, Upload), or functional menus, greatly improving user efficiency in identifying button functions.

Note: This component can be invoked via TuiButtonB1 or its semantic alias TuiButtonGlyph.

Divider Style

Defaults to Type A Glyph. Characteristics: Adds a vertical divider between the icon and the text to provide light visual isolation. It is suitable for toolbar buttons with clear functions.

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph type="primary" icon="tui-icon ti-settings">Primary</TuiButtonGlyph>
    <TuiButtonGlyph type="success" icon="tui-icon ti-check">Success</TuiButtonGlyph>
    <TuiButtonGlyph type="danger" icon="tui-icon ti-close">Danger</TuiButtonGlyph>
  </div>
  
  <div class="demo-row">
    <TuiButtonGlyph plain icon="tui-icon ti-home">Plain Default</TuiButtonGlyph>
    <TuiButtonGlyph plain type="warning" icon="tui-icon ti-alert">Plain Warning</TuiButtonGlyph>
  </div>
</template>

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

Independent Border Style

Enabled by setting decoType="B". Characteristics: The icon is enclosed in an independent rectangular hollow frame, creating a clear modular distinction from the text area. It features a strong mechanical feel.

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph decoType="B" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="invert" icon="tui-icon ti-search">Invert</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="primary" icon="tui-icon ti-star">Primary</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" type="info" icon="tui-icon ti-info">Info</TuiButtonGlyph>
  </div>

  <div class="demo-row">
    <TuiButtonGlyph decoType="B" plain type="emphasis" icon="tui-icon ti-bolt">Emphasis</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" plain type="success" icon="tui-icon ti-check">Success</TuiButtonGlyph>
  </div>
</template>

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

Capsule/Circular Style

Enabled by setting decoType="C". Characteristics: A variant of Type B that changes the rectangular border to a circle or capsule shape (depending on global border-radius settings), resulting in a softer visual style.

vue

<template>
  <div class="demo-row">
    <TuiButtonGlyph decoType="C" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" type="primary" icon="tui-icon ti-user">User</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" type="success" icon="tui-icon ti-check">Done</TuiButtonGlyph>
  </div>
  
  <div class="demo-row">
    <TuiButtonGlyph decoType="C" plain type="danger" icon="tui-icon ti-lock">Locked</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" plain type="warning" icon="tui-icon ti-bell">Notice</TuiButtonGlyph>
  </div>
</template>

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

Icon Position

Control the icon display position via the iconPosition property.

start (Default): Icon is on the left.
end: Icon is on the right.

vue

<template>
  <div class="demo-label">Start (Default) vs End</div>
  <div class="demo-row">
    <TuiButtonGlyph type="primary" icon="tui-icon ti-arrow-left">Prev</TuiButtonGlyph>
    
    <TuiButtonGlyph type="primary" iconPosition="end" icon="tui-icon ti-arrow-right">Next</TuiButtonGlyph>
    
    <TuiButtonGlyph decoType="B" type="emphasis" iconPosition="end" icon="tui-icon ti-export">Export</TuiButtonGlyph>
  </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>

Size and State

Supports size (large/small) and disabled states.

decoOffset: Can be used to fine-tune the spacing between the icon area and the text area.

vue

<template>
  <div class="demo-label">Sizes</div>
  <div class="demo-row">
    <TuiButtonGlyph size="large" type="primary" icon="tui-icon ti-home">Large</TuiButtonGlyph>
    <TuiButtonGlyph type="primary" icon="tui-icon ti-home">Default</TuiButtonGlyph>
    <TuiButtonGlyph size="small" type="primary" icon="tui-icon ti-home">Small</TuiButtonGlyph>
  </div>

  <div class="demo-label">Disabled State</div>
  <div class="demo-row">
    <TuiButtonGlyph decoType="A" disabled icon="tui-icon ti-home">Disabled A</TuiButtonGlyph>
    <TuiButtonGlyph decoType="B" disabled type="primary" icon="tui-icon ti-settings">Disabled B</TuiButtonGlyph>
    <TuiButtonGlyph decoType="C" disabled plain type="warning" icon="tui-icon ti-alert">Disabled C</TuiButtonGlyph>
  </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;
  align-items: center;
  margin-bottom: 12px;
}
</style>

API Reference

Props

TuiButtonGlyph inherits common properties from the base TuiButton.

Parameter	Description	Type	Optional Values	Default
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`
size	Size	`string`	`large` / `small`	-
icon	Icon class name (Required)	`string`	-	-
customColor	Custom color	`string` / `Array`	-	-

Below are properties unique to this component.

Parameter	Description	Type	Optional Values	Default	Applicable Type
decoType	Glyph style type	`string`	`A` (Divider) / `B` (Square) / `C` (Round)	`A`	All
iconPosition	Icon position	`string`	`start` / `end`	`start`	All
decoOffset	Icon and text spacing adjustment	`number`	-	-	All

Slots

Slot Name	Description
default	Button text content
icon	Icon slot (for custom SVG or complex icons)

Events

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

Button Glyph Component ​

Divider Style ​

Independent Border Style ​

Capsule/Circular Style ​

Icon Position ​

Size and State ​

API Reference ​

Props ​

Slots ​

Events ​