Button Shade

🏅Original

Scifi Button - Shade is a broad-spectrum decorative component within the TechUI Tui Button series.

It focuses on the interpretation of "Polymorphic Borders". It is not just a single-style button, but a collection with a vast library of variants.

Note: This component can be invoked via TuiButtonA2 or its semantic alias TuiButtonShade.

Basic Usage

The default is Type A Shade, which features two distinct shadow effects on the left and right sides of the button.

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

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

Diversified Styles

• Use the decoType attribute to switch between Types A-J to display shadow effects in different directions:
• A: East-West
• B: North-South
• C: North side
• D: East side
• E: South side
• F: West side
• G: Northwest
• H: Northeast
• I: Southwest
• J: Southeast

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

  <div class="demo-label">Type C & D</div>
  <div class="demo-row">
    <TuiButtonShade decoType="C" type="success">Type C Success</TuiButtonShade>
    <TuiButtonShade decoType="C" plain type="warning">Type C Plain</TuiButtonShade>
    <TuiButtonShade decoType="D" type="danger">Type D Danger</TuiButtonShade>
    <TuiButtonShade decoType="D" type="emphasis">Type D Emphasis</TuiButtonShade>
  </div>

  <div class="demo-label">Type E</div>
  <div class="demo-row">
    <TuiButtonShade decoType="E" type="info">Type E Info</TuiButtonShade>
    <TuiButtonShade decoType="E" type="primary" size="large">Large E</TuiButtonShade>
  </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>

Geometric Control

All variants (A-J) of TuiButtonShade support the following two geometric parameters for fine-tuning the physical appearance of the button:

• borderRadius: Controls the corner radius of the button.
• decoThickness: Controls the thickness of the decorative border or the light/shadow layer.

<template>
  <div class="demo-label">Border Radius Control (borderRadius)</div>
  <div class="demo-row">
    <TuiButtonShade decoType="A" type="primary" :borderRadius="50">Radius 50</TuiButtonShade>
    <TuiButtonShade decoType="B" type="success" :borderRadius="8">Radius 8</TuiButtonShade>
    <TuiButtonShade decoType="C" type="warning" :borderRadius="0">Radius 0</TuiButtonShade>
  </div>

  <div class="demo-label">Thickness Control (decoThickness)</div>
  <div class="demo-row">
    <TuiButtonShade decoType="D" type="danger" :decoThickness="5">Thickness 5</TuiButtonShade>
    <TuiButtonShade decoType="E" type="info" :decoThickness="1">Thickness 1</TuiButtonShade>
    <TuiButtonShade decoType="F" type="emphasis" :decoThickness="4" :borderRadius="20">Mixed</TuiButtonShade>
  </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>

State Display

Supports disabled (disabled) and plain (plain) states.

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

TuiButtonShade inherits some common attributes from the basic 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	-	-
native-type	Native button type	string	button / submit / reset	button

The following are attributes unique to this component.

Parameter	Description	Type	Optional Values	Default Value	Applicable Types
decoType	Decoration variant type	string	A / B / C / D / E / F / G / H / I / J	A	All
borderRadius	Border corner radius size	number	-	-	All
decoThickness	Decoration/border thickness	number	-	-	All

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)