ScifiButtonPod

⚡WASM Powered

⭐Star

👑Pioneer

ScifiButtonPod (Energy Pod) is a flank-enhanced component in the TechUI Scifi Button series.

Its design focuses on the "Side Wings" and "Horizontal Extension" on the left and right sides. Unlike the fully enclosed structure of A1, A2 concentrates visual weight on the horizontal ends, constructing a geometric structure similar to mechanical clamps or thruster nozzles.

This unique design language gives the button a strong sense of stability, appearing "Locked" or "Ready." It is perfectly suited for function control areas, multi-select toggle panels, or toolbars, where it effectively emphasizes the independence and functionality of operation items while maintaining horizontal order in the interface.

Tip: This component can be invoked via ScifiButtonA2 or its semantic alias ScifiButtonPod.

Basic Usage

Default Form

Use the default slot to pass in button text or icons. By default (Appearance A), the button features unique grooves and short vertical line decorations on the left and right sides, while the middle area remains flat and open.

<template>
  <div class="btn-group">
    <ScifiButtonPod>
      SYSTEM CHECK
    </ScifiButtonPod>
    
    <ScifiButtonPod>
      <Icon name="radar" /> SCAN SECTOR
    </ScifiButtonPod>
  </div>
</template>

Appearance

A2 provides two distinct geometric styles to adapt to different UI densities.

Mode Comparison

• Type A (Default): Clamp Flanks. Features complex grooves and vertical line decorations on the left and right, offering a strong sci-fi feel; suitable for independent functional buttons.
• Type B: Hardcore Chamfer. Simplifies flank details into a tougher geometric chamfered rectangle, creating a more compact visual that is suitable for densely arranged navigation menus or tabs.

<template>
  <div class="grid">
    <ScifiButtonPod appearance="A">Clamp Mode (A)</ScifiButtonPod>
    <ScifiButtonPod appearance="B">Chamfer Mode (B)</ScifiButtonPod>
  </div>
</template>

States & Interaction

The component includes a full set of built-in interaction effects.

Disabled & Active

• disabled: Disabled state. The entire button dims, side decorations lose their luster, and mouse interaction is blocked.
• className="is-active": Active state. The entire button highlights, and side decorations emit a strong light, indicating the current working state.

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

    <ScifiButtonPod className="is-active">
      ENGAGED
    </ScifiButtonPod>
  </div>
</template>

Size Control

Supports three sizes: default, large, and small.

• Small: The Small mode for A2 is very refined, often used for small control switches in sidebars.

<template>
  <ScifiButtonPod size="small">ON</ScifiButtonPod>
  <ScifiButtonPod size="default">STANDBY</ScifiButtonPod>
  <ScifiButtonPod size="large">POWER UP</ScifiButtonPod>
</template>

Visual

Decoration & Color Schemes

• decorationColorAlt: Swaps decoration colors. The flanks of A2 usually use the highlight color; enabling this reverses it to the focus color, which can be used to create "Dangerous Action" buttons (e.g., launch, delete).
• glow: When enabled, the left and right flanks produce a glow effect similar to engine nozzles.

<template>
  <ScifiButtonPod :decorationColorAlt="true">
    PURGE
  </ScifiButtonPod>
  
  <ScifiButtonPod :glow="false">
    ECO MODE
  </ScifiButtonPod>
</template>

CSS Variable

A2's CSS variable interface remains consistent with the entire series.

Case Study: Titan Blue Style

This example defines a heavy industrial-style button with deep blue tones, emphasizing a sense of weight.

<template>
  <ScifiButtonPod className="btn-titan">
    DEPLOY MECH
  </ScifiButtonPod>
</template>

<style lang="less">
.btn-titan {
  /* --- Default State --- */
  --sf-button-bg_def: rgba(15, 23, 42, 0.8); /* Deep blue-black background */
  --sf-button-bd_def: #1e40af;               /* Blue border */
  --sf-button-fc_def: #93c5fd;               /* Light blue text */

  /* --- Hover State --- */
  --sf-button-bg_hov: rgba(30, 58, 138, 0.9);
  --sf-button-bd_hov: #3b82f6;               /* Bright blue border */
  --sf-button-fc_hov: #ffffff;

  /* --- Decoration Colors --- */
  --sf-button-hlite: #60a5fa;  /* Side wing highlight color */
  --sf-button-glow: #2563eb;   /* Engine glow */
  --sf-button-glowop: 0.8;     /* Enhanced glow intensity */
}
</style>

API Reference

Props

Property Name	Description	Type	Default Value
appearance	Appearance Variant. Options: 'A' (Clamp), 'B' (Chamfer)	String	'A'
size	Size. Options: 'default', 'large', 'small'	String	'default'
disabled	Disabled State. When enabled, the style turns gray and is unclickable.	Boolean	false
glow	Glow Switch. Whether to enable side wing glow.	Boolean	true
glowOpacity	Glow Opacity	Number	—
decorationColorAlt	Decoration Variant. Whether to swap the 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 Value
--sf-button-hlite	Decoration color for the left/right Side Wings	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_*)