ScifiButtonDash

⚡WASM Powered

⭐Star

👑Pioneer

ScifiButtonDash is a precision data-oriented component in the TechUI Scifi Button series.

Its design is inspired by "Data Readouts" and "Signal Bands" found on tactical displays. It boldly abandons traditional continuous heavy borders in favor of discontinuous geometric scales and dashed segments to define button boundaries.

This "Discontinuous" visual characteristic significantly reduces the component's visual noise. It is perfectly suited for high-density data lists, parameter adjustment panels, or secondary operation areas. In these scenarios, it provides clear interaction feedback without causing interface clutter due to stacked lines, ensuring the efficient delivery of information.

Tip: This component can be invoked via ScifiButtonA3 or its semantic alias ScifiButtonDash.

Basic Usage

Default Form

Use the default slot to pass in button text or icons. By default (Appearance A), the button features bar-shaped scale decorations similar to "signal strength" at the four corners or bottom.

<template>
  <div class="btn-group">
    <ScifiButtonDash>
      CALIBRATE
    </ScifiButtonDash>
    
    <ScifiButtonDash>
      <Icon name="settings" /> CONFIGURE
    </ScifiButtonDash>
  </div>
</template>

Appearance

A3 provides two appearance styles, primarily differing in the position and density of the scales.

Mode Comparison

• Type A (Default): Corner Ticks. Miniature L-shaped or single-line scales are distributed at the four corners of the button. The visual center of gravity is dispersed, making it suitable for independent buttons.
• Type B: Base Array. Decorative elements are concentrated at the bottom or sides of the button, appearing as a neat row of signal blocks. This creates a strong "base" feel, suitable for tabs or navigation buttons.

<template>
  <div class="grid">
    <ScifiButtonDash appearance="A">Corner Ticks (A)</ScifiButtonDash>
    <ScifiButtonDash appearance="B">Base Array (B)</ScifiButtonDash>
  </div>
</template>

States & Interaction

The interaction effects of A3 emphasize the instantaneous sensation of a "signal connecting".

Disabled & Active

• disabled: Disabled state. The scales go out, and the background transparency is significantly reduced, presenting an offline sense of "signal loss".
• className="is-active": Active state. All scale decorations light up instantly, as if the data transmission channel has been established.

<template>
  <div class="row">
    <ScifiButtonDash :disabled="true">
      NO SIGNAL
    </ScifiButtonDash>

    <ScifiButtonDash className="is-active">
      CONNECTED
    </ScifiButtonDash>
  </div>
</template>

Size Control

Supports three sizes: default, large, and small.

• Small: The small size mode of A3 is very suitable for use as Pagination or Toolbar Icons.

<template>
  <ScifiButtonDash size="small">PREV</ScifiButtonDash>
  <ScifiButtonDash size="default">INDEX</ScifiButtonDash>
  <ScifiButtonDash size="large">NEXT PAGE</ScifiButtonDash>
</template>

Visual

Decoration & Color Schemes

• decorationColorAlt: Swaps color schemes. By default, scales use the Highlight color; enabling this switch changes them to the Focus color. This can be used to distinguish "normal data" from "critical parameters".
• glow: When enabled, a faint electronic glow is generated around the scales.

<template>
  <ScifiButtonDash :decorationColorAlt="true">
    CRITICAL
  </ScifiButtonDash>
  
  <ScifiButtonDash :glow="false">
    ITEM 01
  </ScifiButtonDash>
</template>

CSS Variable

The CSS variable interface of A3 allows you to define highly futuristic "holographic interfaces".

Case Study: Cyber Wasp Style

This example defines an industrial-style button with a yellow and black color scheme, simulating the operation interface of engineering machinery.

<template>
  <ScifiButtonDash className="btn-wasp">
    INITIATE
  </ScifiButtonDash>
</template>

<style lang="less">
.btn-wasp {
  /* --- Default State --- */
  --sf-button-bg_def: rgba(20, 20, 0, 0.6);  /* Dark yellow-black background */
  --sf-button-bd_def: #854d0e;               /* Dark gold border */
  --sf-button-fc_def: #fcd34d;               /* Gold text */

  /* --- Hover State --- */
  --sf-button-bg_hov: rgba(40, 30, 0, 0.8);
  --sf-button-bd_hov: #eab308;               /* Bright yellow border */
  --sf-button-fc_hov: #ffffff;

  /* --- Decoration Colors --- */
  --sf-button-hlite: #facc15;  /* Scale highlight color */
  --sf-button-glow: #fbbf24;   /* Yellow glow */
  --sf-button-focus: #ffffff;  /* Auxiliary decoration white */
}
</style>

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant. Options: 'A' (Corner Ticks), 'B' (Base Array)	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 scale 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 Ticks/Array	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_*)