ScifiButtonHex

⚡WASM Powered

⭐Star

👑Pioneer

ScifiButtonHex (Lattice) is the core foundational component of the TechUI Scifi Button series.

It is a universal tactical-style button and the cornerstone of the entire button system. It employs the classic "Bracket Constraint" and "Crystal Chamfer" design languages.

As the component with the richest set of variants in the series, it offers multiple visual forms (Appearances A/B/C): ranging from lightweight brackets on both sides to full-wrap hexagonal borders and highlighted fill styles. It features built-in high-performance SVG-based interaction animations, supporting hover scaling, click feedback, and light-streak effects, making it perfectly adaptable for various interaction scenarios from primary action buttons to secondary function keys.

Tip: This component can be invoked via ScifiButtonA1 or its semantic alias ScifiButtonHex.

Basic Usage

Default Form

Use the default slot to pass in button text or icons. By default (Appearance A), the button presents a classic "four-corner bracket" wrapped form, suitable as a primary interaction trigger.

<template>
  <div class="btn-group">
    <ScifiButtonHex>
      CONFIRM
    </ScifiButtonHex>
    
    <ScifiButtonHex>
      <Icon name="upload" /> UPLOAD DATA
    </ScifiButtonHex>
  </div>
</template>

Appearance

A1 is the only component in the series that features three distinct forms, toggled via the appearance property.

Mode Comparison

• Type A (Default): Standard Bracket. Features distinct L-shaped reinforced brackets at the four corners, emphasizing the boundaries of the clickable area; suitable for most general scenarios.
• Type B: Chamfered Bar. Uses a chamfered design on both sides for a more streamlined visual feel, ideal for longer text or navigation bar options.
• Type C: Minimal Top/Bottom. Removes the left and right borders, retaining only the top and bottom lines and corner hints; suitable as secondary buttons or for densely arranged button groups.

<template>
  <div class="grid">
    <ScifiButtonHex appearance="A">Standard (A)</ScifiButtonHex>
    <ScifiButtonHex appearance="B">Chamfered (B)</ScifiButtonHex>
    <ScifiButtonHex appearance="C">Minimal (C)</ScifiButtonHex>
  </div>
</template>

States & Interaction

The component includes comprehensive built-in interaction state management, eliminating the need for manual CSS writing.

Disabled & Active

• disabled: Disables the button. The style turns to a dim gray, and the mouse pointer changes to a "not-allowed" state. This is not just a visual change; it also intercepts click events.
• className="is-active": Forces an active state. The button remains highlighted, commonly used to indicate a "toggle-on" state or the currently selected option.

<template>
  <div class="row">
    <ScifiButtonHex :disabled="true">
      OFFLINE
    </ScifiButtonHex>

    <ScifiButtonHex className="is-active">
      SELECTED
    </ScifiButtonHex>
  </div>
</template>

Size Control

Supports three sizes: default, large, and small.

• Large: Larger font and increased padding, suitable as a primary entry point for a page.
• Small: Smaller font with a more compact structure, ideal for toolbars or table operation columns.

<template>
  <ScifiButtonHex size="small">EDIT</ScifiButtonHex>
  <ScifiButtonHex size="default">SAVE</ScifiButtonHex>
  <ScifiButtonHex size="large">LAUNCH</ScifiButtonHex>
</template>

Visual

Decoration & Color Schemes

• decorationColorAlt: Swaps decoration colors. By default, the highlight color is used for glow and the focus color for accents. Enabling this swaps the two, useful for distinguishing semantics like "Confirm" and "Cancel".
• glow: Whether to enable the light-streak background and border glow.
• scaleAction: Whether to enable scaling animations during hover/click.

<template>
  <ScifiButtonHex 
    :decorationColorAlt="true" 
    :scaleAction="false"
  >
    CANCEL
  </ScifiButtonHex>
  
  <ScifiButtonHex :glow="false">
    SILENT MODE
  </ScifiButtonHex>
</template>

CSS Variable

The ScifiButton series features a powerful CSS variable system, allowing precise control over Background (bg), Border (bd), and Font Color (fc) across four states: Default (Def), Hover (Hov), Active (Act), and Disabled (Dis).

Case Study: Warning Style

This example defines an orange-red warning button that brightens on hover and turns white upon clicking.

<template>
  <ScifiButtonHex className="btn-warning">
    SELF DESTRUCT
  </ScifiButtonHex>
</template>

<style lang="less">
.btn-warning {
  /* --- Default State --- */
  --sf-button-bg_def: rgba(69, 10, 10, 0.5); /* Dark red background */
  --sf-button-bd_def: #b91c1c;               /* Red border */
  --sf-button-fc_def: #fca5a5;               /* Light red text */

  /* --- Hover State --- */
  --sf-button-bg_hov: rgba(185, 28, 28, 0.6);
  --sf-button-bd_hov: #ef4444;               /* Bright red border */
  --sf-button-fc_hov: #ffffff;

  /* --- Active State --- */
  --sf-button-bg_act: #ef4444;
  --sf-button-bd_act: #f87171;
  --sf-button-fc_act: #ffffff;

  /* --- Decoration Colors (Highlight & Focus) --- */
  --sf-button-hlite: #fca5a5;  /* Highlight decoration color */
  --sf-button-glow: #ef4444;   /* Glow color */
}
</style>

API Reference

Props

Property	Description	Type	Default
appearance	Visual Variant. Options: 'A' (Bracket), 'B' (Chamfered), 'C' (Minimal)	String	'A'
size	Size. Options: 'default', 'large', 'small'	String	'default'
disabled	Disabled State. When enabled, the style grays out and becomes unclickable.	Boolean	false
glow	Glow Switch. Whether to enable background light-streaks and border halos.	Boolean	true
glowOpacity	Glow Opacity	Number	—
decorationColorAlt	Decoration Variant. Whether to swap the highlight color and focus color.	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

The following variables all support overrides via className.

Variable Name	Description	Default (Light/Dark)
State Colors
--sf-button-bg_{state}	Background color (def, hov, act, dis)	var(--button-bg_*)
--sf-button-bd_{state}	Border color (def, hov, act, dis)	var(--button-bd_*)
--sf-button-fc_{state}	Text color (def, hov, act, dis)	var(--button-fc_*)
Decoration & Effects
--sf-button-hlite	Highlight decoration color	var(--scifi-hlite)
--sf-button-focus	Focus decoration color	var(--scifi-focus)
--sf-button-glow	Glow color	var(--scifi-hlite)
--sf-button-glowop	Glow intensity	0.5
--sf-button-bdw	Border width	1px