ScifiButtonExo

⚡WASM Powered

⭐Star

👑Pioneer

ScifiButtonExo (Exoskeleton/骸甲) is a fused heavy-duty component within the TechUI Scifi Button series.

It breaks the traditional binary convention of buttons being either "round or square". It employs a unique design language characterized by "Exoskeleton Reinforcement" and "Chamfered Capsules".

Visually, it is composed of a core chamfered strip body interlocked with independent mechanical end cap structures on the left and right sides. This design retains the fluid momentum of a capsule button while imparting a strong sense of industrial precision through sharp chamfers and multi-layered structures. It resembles a core component encased in armor, making it ideal for primary function operations, module start/stop, or system navigation. It provides a clear click area while delivering a solid and reliable tactile feel.

Tip: This component can be invoked via ScifiButtonA4 or its semantic alias ScifiButtonExo.

Basic Usage

Default Form

Use the default slot to pass in button text or icons. By default (Appearance A), the button appears as a mechanical structure with independent left and right end caps, with the center area used to carry text.

<template>
  <div class="btn-group">
    <ScifiButtonExo>
      ACTIVATE MODULE
    </ScifiButtonExo>
    
    <ScifiButtonExo>
      <Icon name="link" /> LINK START
    </ScifiButtonExo>
  </div>
</template>

Appearance

A4 provides two mechanical structures with subtle differences, primarily reflected in the closure of the end caps.

Mode Comparison

• Type A (Default): Open Cap. The end caps on both sides are outlined by lines, and the middle part integrates highly with the background, offering a more transparent visual.
• Type B: Solid Armor. The end cap areas have a more solid color fill, and the edge chamfers are sharper, providing a stronger sense of unity; suitable for use as a "solid" button.

<template>
  <div class="grid">
    <ScifiButtonExo appearance="A">Open Cap (A)</ScifiButtonExo>
    <ScifiButtonExo appearance="B">Solid Armor (B)</ScifiButtonExo>
  </div>
</template>

States & Interaction

The component features built-in interaction feedback resembling mechanical interlocking.

Disabled & Active

• disabled: Disabled state. The end cap structures dim as if the mechanical structure is locked, losing its energy luster.
• className="is-active": Active state. The connection between the end caps and the center emits a strong light, indicating that energy is connected.

<template>
  <div class="row">
    <ScifiButtonExo :disabled="true">
      LOCKED
    </ScifiButtonExo>

    <ScifiButtonExo className="is-active">
      LINKED
    </ScifiButtonExo>
  </div>
</template>

Size Control

Supports three sizes: default, large, and small.

• Large: Suitable as a prominent "Start/Stop" control key.

<template>
  <ScifiButtonExo size="small">MIN</ScifiButtonExo>
  <ScifiButtonExo size="default">NORM</ScifiButtonExo>
  <ScifiButtonExo size="large">MAX POWER</ScifiButtonExo>
</template>

Visual

Decoration & Color Schemes

• decorationColorAlt: Swaps decoration colors. The end cap lines of A4 use the highlight color by default; enabling this switch changes them to the focus color.
• glow: When enabled, a soft halo appears around the capsule outline, similar to an energy shield.

<template>
  <ScifiButtonExo :decorationColorAlt="true">
    ALTERNATE
  </ScifiButtonExo>
  
  <ScifiButtonExo :glow="false">
    PHYSICAL
  </ScifiButtonExo>
</template>

CSS Variable

The CSS variable interface of A4 allows you to create highly recognizable "brand color" buttons.

Case Study: Neon Vapor Style (Neon Vapor)

This example defines a button with a high-saturation pink and purple color scheme, combined with strong lighting effects, suitable for cyberpunk-style interfaces.

<template>
  <ScifiButtonExo className="btn-vapor">
    VAPORWAVE
  </ScifiButtonExo>
</template>

<style lang="less">
.btn-vapor {
  /* --- Default State --- */
  --sf-button-bg_def: rgba(40, 0, 40, 0.6);  /* Deep purple background */
  --sf-button-bd_def: #d946ef;               /* Pink-purple border */
  --sf-button-fc_def: #f0abfc;               /* Light pink text */

  /* --- Hover State --- */
  --sf-button-bg_hov: rgba(80, 0, 80, 0.8);
  --sf-button-bd_hov: #e879f9;               /* Bright pink border */
  --sf-button-fc_hov: #ffffff;

  /* --- Decoration Colors --- */
  --sf-button-hlite: #22d3ee;  /* Contrast Cyan: End cap highlight */
  --sf-button-glow: #c026d3;   /* Purple halo */
  --sf-button-focus: #e879f9;  /* Auxiliary pink */
}
</style>

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant. Options: 'A' (Open Cap), 'B' (Solid Armor)	String	'A'
size	Size. Options: 'default', 'large', 'small'	String	'default'
disabled	Disabled State. Grays out the style and disables clicking when enabled	Boolean	false
glow	Glow Switch. Whether to enable capsule glow	Boolean	true
glowOpacity	Glow Opacity	Number	—
decorationColorAlt	Decoration Variant. Whether to swap Highlight and Focus colors	Boolean	false
scaleAction	Scale Animation. Whether to enable scaling effects on hover/click	Boolean	true
backgroundOpacity	Background Opacity	Number	—
borderWidth	Border Line Width (px)	Number	—
className	Custom Class Name	String	—

Slots

Slot Name	Description
default	Button content (text, icons, etc.)

CSS Variables

Variable Name	Description	Default
--sf-button-hlite	Decoration color for End Caps	var(--scifi-hlite)
--sf-button-focus	Auxiliary decoration color	var(--scifi-focus)
--sf-button-bdw	Border width	1px
--sf-button-bg_{state}	Background color for each state	var(--button-bg_*)