HabStatusStrip

The condition of the thing you are looking at — build health, sync state, a danger zone. One per screen region, at the top of it.

Build failing

Last green 2 hours ago

3 tests failing2 flaky12 skipped

All systems healthy

Checked 30 seconds ago

42 checks passing

Migration in progress

Started 4 minutes ago

Status left, evidence in the middle, actions right — an 8px CLASSIFYING edge

<HabStatusStrip tone="error" title="Build failing" note="Last green 2 hours ago">
	<HabStatusNote tone="error">3 tests failing</HabStatusNote>

	<template #actions>
		<HabButton
			variant="outlined"
			tone="neutral"
			>Re-run</HabButton
		>
	</template>
</HabStatusStrip>

It reads as a card — the same 8px classifying left border — but is laid out as a bar: status left, evidence in the middle, actions hard right.

Strip or banner

A strip is the standing state of the page. Use HabBanner for a transient message the user dismisses.

That distinction is visible in two places. The edge is 8px --hab-edge-classify rather than 4px --hab-edge-notice. And the strip sits on the plain surface rather than a tint, with all of its color in the edge and the glyph — a tinted strip would read as something that just happened.

Its glyphs are the outline set where a banner takes solid ones: a strip states a condition rather than announcing a message, and should not shout.

Tones

The four semantics plus accent, which is the neutral "in progress" state — a migration running, a rebuild queued. color overrides the tone entirely for a condition whose color comes from data.

HabStatusNote

The evidence inside a strip. One finding each.

It is a fact, not a control. It takes the control radius, never a pill, and that is deliberate: shape carries the rule in this system, and a pill invites a touch. If the thing is selectable, removable or a filter, it is a HabChip.

Each tone prints its -text leg on its own tint, the same rule HabBadge follows — never the base color on a tint of itself.

Accessibility

• Renders a <section>, because it is a region's standing state rather than a run of text. Give the page's region a heading if the strip is not the only thing identifying it.
• The glyph is decorative and aria-hidden; the title carries the condition. The tone must not be the only thing saying whether this is good or bad — the title should say it in words.
• HabStatusNote has no role and no tab stop. It is text.
• Only one strip per region. Two strips are two standing conditions, and the reader cannot tell which governs.

API

Props

Prop	Type	Default	Description
color	string	undefined	An explicit left-border color, overriding tone. Any CSS color, for a condition whose color comes from data.
icon	string | null	undefined	SVG path data, e.g. mdiAlertOutline from @mdi/js. Defaults per tone; pass null to drop it.
note	string	undefined	Second line: when it happened, what the last good state was.
title	string	undefined	—
tone	"error" | "accent" | "info" | "success" | "warning"	"info"	—

Slots

Slot	Bindings	Description
actions	any	Right-aligned link and/or button.
default	any	HabStatusNote findings carrying the evidence.
leading	any	Leading adornment, replacing the glyph. Takes precedence over icon.

HabStatusNote

Props

Prop	Type	Default	Description
icon	string	undefined	SVG path data from @mdi/js. Defaults per tone.
tone	"error" | "accent" | "info" | "success" | "warning"	"error"	—

Slots

Slot	Bindings	Description
default	any	The finding.
leading	any	Leading adornment, replacing the glyph. Takes precedence over icon.