TensionBar — tension-bar

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { TensionBar } from '@oalacea/chaosui/buttons/tension-bar';

<TensionBar value={75} />
<TensionBar value={90} variant="danger" dangerThreshold={80} />
<TensionBar value={50} variant="segmented" showMarkers />

PROPS

PropTypeDefault

valueCurrent value

number-

maxMaximum value

number100

labelLeftLeft label

string-

labelRightRight label

string-

showPercentageShow percentage

booleanfalse

showMarkersShow markers

booleanfalse

markerCountNumber of markers

number10

variantVisual variant

"default" | "gold" | "danger" | "segmented" | "dramatic""default"

sizeBar size

"sm" | "md" | "lg""md"

innerTextText inside bar

string-

animatedEnable animation

booleanfalse

dangerThresholdDanger threshold percentage

number80