The display-only value bar a usage strip, an origins chart, a score or a ratio is built
from — color
× size, a
value
clamped between min
and max, and an optional header
row. No JavaScript; the width is the only thing carried inline.
The <.button>
palette, mapped to design tokens — every bar reads in light and dark.
accent
is the default.
xs sm md lg
track heights. sm
is the default and matches the dashboard's thin bars.
With no label
/ value_label
/ show_value
it's just the bar — drop it in a table cell. Give any of them for a header: your own
value_label
text, or the computed percentage via show_value.
color
is just an attribute, so a threshold meter drives it from the value —
success
under 70%, warning
to 90%, then danger
(see the Usage block).
The dashboard footer's capacity widgets — an xs
bar under each figure, the color driven by how full it is.
A ranked bar chart — each row a country, the bar a share of the day's traffic.
# default = meter semantics, accent fill, thin sm track
<.meter value={62} color="warning" />
# a header row: your own value text on the right
<.meter value={1.74} max={3.0} label="Disk" value_label="1.74 / 3.0 TiB" />
# or the computed percentage via show_value
<.meter value={58} label="CPU" show_value color="success" size="xs" />
# drive the color from the value (a threshold meter)
<.meter value={@pct} color={if @pct > 90, do: "danger", else: "success"} />
# task completion → role="progressbar"
<.meter variant="progress" value={@uploaded} max={@total} aria-label="Upload" />