Components / Attention Bar

Attention Bar

The app shell's takeover bar: the product has stopped and one action restores it (a walled workspace, ghost mode, a credit balance under the cheapest generation). Never for a notice that can be ignored; that is Alert, in the flow of a page.

import { AttentionBar } from '@layers/ui/attention-bar'

Rendered stock

House rules

• One line, one sentence, one action, and the WHOLE BAR is the control: the button is the full width of the shell, with the hover state to match. The action is the illusion of a link (an underlined span), not a nested button.
• One color, no variants. `--attention` (#d9ff43) with --ink on top, constant across themes: it is shown only in extreme cases, and both modes must agree about what "stopped" looks like.
• No icon, no title, no description. If the state needs more than a sentence to explain, the sentence is wrong or the surface is (an empty state, a dialog).
• The action is Title Case: it is chrome ("Buy Credits", "Subscribe"). The sentence before it is prose and stays in sentence case. A product name in the action keeps its own casing ("View in ladmin").
• An action that NAVIGATES passes `href` and the bar renders as a real anchor — cmd-click, middle-click and copy-link all work. `loading` is a button concern and does not combine with it.
• Mounted once, by the shell (`ShellBars` in apps/web), never by a page. On the compact shell it sits at the bottom edge; the sentence may wrap there rather than truncate, so the action is never cut off.
• Not an Alert. Alert is a titled notice with slots and a 60px action reserve; this is a sentence inside a button. Do not rebuild it from Alert with className overrides, which is what it replaced.