StatusBar

structure · static (no JavaScript) · no children. All components: component playground.

Description for the model

Thin strip of short facts above or below the header: an editorial ribbon or a status-page line (coloured dots by tone).

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "StatusBar",
  "props": {
    "variant": "ribbon",
    "items": [
      {
        "label": "New course: Dialling in",
        "tone": "info"
      },
      {
        "label": "Free preview lessons",
        "tone": "ok"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
variant	"ribbon" | "status"		ribbon = editorial small caps, status = monospace with status dots. default "ribbon"
items	array of objects	yes	Items. max 6 items
items[].label	string	yes	Text. max length 80
items[].tone	"neutral" | "ok" | "warn" | "alert" | "info"		Semantic colour. default "neutral"

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

New course: Dialling in · Free preview lessons

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "items": "none"
}

Issues:

• /items expected array, got string

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 10 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.