molecule
gy-cost-bar
Horizontal cost-vs-value bar with two stacked rows that reads at a glance as spend on these things versus output from these things.
Live
What you ship.
Markup
<gy-cost-bar size="md" cost-label="Cost" value-label="Value"></gy-cost-bar>Prop space
Tier
Tag
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Row height + label typography scale. |
costLabel | string | 'Cost' | Override the default Cost label on the cost row. |
valueLabel | string | 'Value' | Override the default Value label on the value row. |
cost | readonly CostBarSegment[] | [] | Cost segments. Empty array hides the cost row. |
value | readonly CostBarSegment[] | [] | Value segments. Empty array hides the value row. |
Where this lives
import '@gyrum-labs/components/cost-bar/cost-bar.js';