ScifiButtonFin

⚡WASM Powered

👑Pioneer

ScifiButtonFin (Swept Wing/掠翼) is a dynamic guidance-oriented component in the TechUI Scifi Button series.

It boldly abandons traditional vertical boundary constraints in favor of an aggressive "Parallelogram" geometric construction.

This overall tilted shape completely breaks the static balance of the interface, visually generating a strong sense of "shear force" and "directionality". It carries a built-in momentum of "moving forward," making it ideal for grouped guidance operations (such as "Previous/Next" navigation), racing/sports data dashboards, or any scenario requiring emphasis on speed and trends, effectively guiding the user's visual flow.

Tip: This component can be invoked via ScifiButtonA5 or its semantic alias ScifiButtonFin.

Basic Usage

Default Form

Use the default slot to pass in button text or icons. By default (Appearance A), the button appears as a parallelogram tilted to the right.

<template>
  <div class="btn-group">
    <ScifiButtonFin>
      NEXT LEVEL
    </ScifiButtonFin>
    
    <ScifiButtonFin>
      <Icon name="fast-forward" /> SPEED UP
    </ScifiButtonFin>
  </div>
</template>

Appearance

A5 provides two skew styles, differing primarily in border complexity and decorative details.

Mode Comparison

• Type A (Default): Standard Skew. A clean, single-layer parallelogram border that is visually sharp and suitable for most scenarios.
• Type B: Armored Skew. Features additional parallel lines or cutting details at the skewed edges or corners, providing higher visual weight; suitable as an emphasis button.

<template>
  <div class="grid">
    <ScifiButtonFin appearance="A">Standard Skew (A)</ScifiButtonFin>
    <ScifiButtonFin appearance="B">Armored Skew (B)</ScifiButtonFin>
  </div>
</template>

Direction Control

This is a feature exclusive to the A5 component. Because parallelograms are directional, A5 allows the tilt angle to be reversed via a property.

Left/Right Tilt

• Default (False): Tilts to the right (usually representing "Forward" or "Positive").
• True: Tilts to the left (usually representing "Backward" or "Reverse").

This feature makes A5 perfectly suited for creating navigation bars or status bars for opposing sides.

<template>
  <div class="nav-bar">
    <ScifiButtonFin :directionAlt="true">
      PREVIOUS
    </ScifiButtonFin>

    <ScifiButtonFin>
      NEXT
    </ScifiButtonFin>
  </div>
</template>

States & Interaction

The interaction effects of A5 combine tilting deformation with color enhancement.

Disabled & Active

• disabled: Disabled state. The skewed block dims, and edge luster disappears.
• className="is-active": Active state. The entire button highlights, and the tilted edges emit a strong laser-like texture.

<template>
  <div class="row">
    <ScifiButtonFin :disabled="true">DISABLED</ScifiButtonFin>
    <ScifiButtonFin className="is-active">ACTIVE</ScifiButtonFin>
  </div>
</template>

Size Control

Supports three sizes: default, large, and small.

<template>
  <ScifiButtonFin size="small">LOW</ScifiButtonFin>
  <ScifiButtonFin size="default">MID</ScifiButtonFin>
  <ScifiButtonFin size="large">HIGH</ScifiButtonFin>
</template>

Visual

Decoration & Color Schemes

• decorationColorAlt: Swaps decoration colors. In A5, this typically affects the color of the highlighted lines on the skewed edges.
• glow: When enabled, the acute corners of the parallelogram produce a more pronounced halo.

<template>
  <ScifiButtonFin :decorationColorAlt="true">
    ENEMY TEAM
  </ScifiButtonFin>
  
  <ScifiButtonFin :glow="false">
    FLAT MODE
  </ScifiButtonFin>
</template>

CSS Variable

The CSS variable interface for A5 allows you to define color schemes with a high sense of speed, such as Racing Red or Electric Blue.

Case Study: Red Shift Style

This example defines an aggressive red skewed button paired with a leftward tilt to simulate an emergency brake or backward operation.

<template>
  <ScifiButtonFin 
    className="btn-red-shift"
    :directionAlt="true"
  >
    EMERGENCY BRAKE
  </ScifiButtonFin>
</template>

<style lang="less">
.btn-red-shift {
  /* --- Default State --- */
  --sf-button-bg_def: rgba(127, 29, 29, 0.7); /* Deep red background */
  --sf-button-bd_def: #dc2626;                /* Red border */
  --sf-button-fc_def: #fecaca;                /* Light red text */

  /* --- Hover State --- */
  --sf-button-bg_hov: rgba(153, 27, 27, 0.9);
  --sf-button-bd_hov: #ef4444;                /* Bright red border */
  --sf-button-fc_hov: #ffffff;

  /* --- Decoration Colors --- */
  --sf-button-hlite: #f87171;  /* Skewed edge highlight */
  --sf-button-glow: #b91c1c;   /* Red trailing halo */
  --sf-button-focus: #fee2e2;  /* Auxiliary white */
}
</style>

API Reference

Props

Property	Description	Type	Default
appearance	Appearance Variant. Options: 'A' (Standard), 'B' (Armored)	String	'A'
directionAlt	Tilt Direction. false for right-tilt (Forward), true for left-tilt (Backward)	Boolean	false
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 skewed edge 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 Skewed Edges/Corners	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_*)