ScifiButton: Technology Button Overview

TechUI Scifi Button is a high-performance interactive component library specifically crafted for Science Fiction (Sci-Fi), Cyberpunk, and military-style interfaces.

Unlike traditional CSS buttons, the entire ScifiButton series is built on SVG (Scalable Vector Graphics). This allows them to present complex geometric forms that cannot be achieved with CSS border-radius—such as physical chamfers, hollow brackets, and mechanical interlocking structures—while maintaining absolute clarity at any screen resolution.

It serves as the ideal interactive companion to the ScifiPanel series, together building a unified futuristic UI language.

Core Features

• SVG Vector Rendering: Say goodbye to image slicing. All buttons are drawn in real-time via code, making them lightweight and aliasing-free.
• Polymorphic Appearance: Each component features built-in geometric variants such as A, B, and C, allowing for visual style changes without switching components.
• Intelligent Interaction Engine: Features built-in unified interaction logic based on SVGDefs. It automatically handles style transitions for Hover, Active, and Disabled states, and supports Scale and Glow animations.
• Deep Customization (Theming): Provides a full range of CSS variable interfaces, supporting end-to-end color definitions from "Default" to "Hover" and "Active".

Naming and Aliases

To balance development stability with code readability, TechUI Scifi Button components utilize a dual naming strategy. Every component possesses a fixed original serial name and a semantic alias.

• Fixed Serial Name
  • Examples: ScifiButtonA1, ScifiButtonA5
  • This is the underlying physical ID of the component based on the development sequence. It is permanently fixed and unchangeable. If you wish for your code to maintain absolute backward compatibility in future versions, using this name is recommended.
• Semantic Alias
  • Examples: ScifiButtonHex, ScifiButtonFin
  • These are shortcuts named after visual styles or design metaphors (e.g., Hex/Lattice, Fin/Swept Wing) intended to improve code readability.

Note: As the design language evolves, individual aliases may undergo semantic fine-tuning or renaming in later versions. While compatibility is maintained where possible, please check the changelog during major version upgrades.

Component Family

ScifiButton currently consists of 5 core components, each corresponding to different semantic scenarios.

ScifiButtonHex

• Keywords: Universal · Brackets · Standard
• The all-purpose button of the series, featuring a classic "four-corner bracket" design.
• Usage: Primary page operations, form submissions, popup confirmations.
• Characteristics: Features the most complete set of appearance variants (A/B/C) and the strongest adaptability.

ScifiButtonPod

• Keywords: Toolbar · Horizontal · Clamp
• Emphasizes horizontal constraints, featuring mechanical clamps or wing structures on the left and right sides.
• Usage: Toolbars, function groups, horizontally arranged tabs.
• Characteristics: The visual center of gravity is on the sides with an open center, making it ideal for sequential placement.

ScifiButtonDash

• Keywords: Data · Precision · Ticks
• A lightweight component focused on a sense of precision, using dashed lines or scales instead of continuous borders.
• Usage: Operation items in dense data lists, parameter fine-tuning, secondary commands.
• Characteristics: Extremely low visual interference with an electronic texture suggesting "signal connection".

ScifiButtonExo

• Keywords: Capsule · Toggle · Solid
• A capsule-type component that blends a rounded feel with hardcore chamfers.
• Usage: Status toggles (Start/Stop), module activation/deactivation, independent floating buttons.
• Characteristics: High sense of structural closure, appearing like a physical solid button.

ScifiButtonFin

• Keywords: Direction · Speed · Skew
• A speed-oriented component utilizing a parallelogram design.
• Usage: "Next/Previous" navigation, game interfaces, operations emphasizing momentum.
• Unique Feature: Supports the directionAlt property to control leftward or rightward tilt.

Universal API Reference

All components in the ScifiButton series share a standardized set of Props to reduce learning costs.

Property	Description	Default
appearance	Appearance Mode. Usually supports variants like 'A', 'B'.	'A'
size	Size. Supports 'default', 'large', 'small'.	'default'
disabled	Disabled State. Grays out the style and disables interaction.	false
glow	Glow Switch. Controls background light-streaks and border halos.	true
scaleAction	Scale Feedback. Micro-scaling animation on hover/click.	true
decorationColorAlt	Color Inversion. Swaps highlight and focus colors.	false

Quick Start

<script setup>
import { ScifiButtonHex, ScifiButtonFin } from '@techui/scifi-button'
</script>

<template>
  <div class="control-panel">
    <ScifiButtonHex @click="handleSubmit">
      CONFIRM
    </ScifiButtonHex>

    <ScifiButtonHex :decorationColorAlt="true">
      ABORT
    </ScifiButtonHex>

    <div class="nav-group">
      <ScifiButtonFin :directionAlt="true">PREV</ScifiButtonFin>
      <ScifiButtonFin>NEXT</ScifiButtonFin>
    </div>
  </div>
</template>

Style Customization System

The style of ScifiButton is controlled by a set of standardized CSS variables, which can be overridden at any level.

/* Global override or local class override */
.my-custom-theme {
  /* --- 1. Define State Colors (Def/Hov/Act/Dis) --- */
  --sf-button-bg_def: rgba(0, 50, 100, 0.5); /* Default Background */
  --sf-button-bd_def: #00aaff;               /* Default Border */
  --sf-button-fc_def: #ffffff;               /* Default Font Color */
  
  --sf-button-bd_hov: #66ccff;               /* Hover Border */
  --sf-button-bd_act: #ffffff;               /* Active Border */

  /* --- 2. Define Decoration Colors --- */
  --sf-button-hlite: #00aaff;  /* Highlight Decoration */
  --sf-button-glow: #00aaff;   /* Glow/Halo */
}