buttons

TensionBar

Progress/tension meter with dramatic styling.

npx chaos add tension-bar

PREVIEW

USAGE

import { TensionBar } from '@/components/chaos/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