Display

Cards, chips, badges, dots, alerts, facts, meters and gauges.

Components with a tone take neutral, accent, info, success, warning, danger or important, each from the theme’s status roles.

Card

heading adds a header, with an actions slot beside it. href makes the whole card a link, and flush drops the padding for a table or image that fills it.

Chip and dot

A dot on its own needs a label, such as “Online”; beside text that says the same, leave it out. pulse makes it breathe while something is live.

Badge

A pill with an icon, a value and an optional small label, after Home Assistant’s badges. The icon takes the tone’s colour. size="small" fits it in a table row.

Alert

It’s announced politely as a status, or at once with urgent for an error that needs attention. Slot an icon in icon and buttons in actions.

Facts

Label and value pairs as a description list. Set items to [{ "label", "value" }].

Meter

A bar for a value in a range, with min (0) and max (100). Past high it turns warning and past critical danger, unless a tone is set. display replaces the percentage shown beside the label.

Gauge

A reading on a dial, after Home Assistant’s gauge card. The arc fills to value between min and max and glides when it changes. It turns warning at warning (75) and danger at danger (90); inverted makes lower readings worse, for a battery. display replaces the number, unit (%) sits under it, and caption goes under the label. Set its size with --gw-gauge-size.