Status

`<kern-badge>`

Short label for properties (Gen, firmware, function) and results in tables. At most two words; device states use kern-status instead.

Examples

Tones

Badges label properties and results in at most two words. tone colours them; neutral is the default for plain properties such as the device generation. Device states belong in kern-status.

Gen2

Template

connected

Update

Auth failed

<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center"> <kern-badge>Gen2</kern-badge> <kern-badge tone="accent">Template</kern-badge> <kern-badge tone="ok">connected</kern-badge> <kern-badge tone="warn">Update</kern-badge> <kern-badge tone="danger">Auth failed</kern-badge> </div>

Versions and IDs

mono sets the text in monospace for firmware versions, IDs and similar values. Badges sit well next to a name in a table cell.

Küche Licht Update 1.4.4 1.5.0-beta2

<p style="margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center"> Küche Licht <kern-badge tone="warn">Update</kern-badge> <kern-badge mono>1.4.4</kern-badge> <kern-badge mono tone="accent">1.5.0-beta2</kern-badge> </p>

Properties

mono

reflects

default false

boolean

Monospace text for versions and IDs.

tone

reflects

default 'neutral'

"accent" | "danger" | "neutral" | "ok" | "warn"

Slots

(default)

Badge text