Feedback & status

AppBanner

A full-width, persistent page announcement — maintenance, a trial ending, a new version.

<app-banner tone="info">…</app-banner>

<app-banner> is a full-bleed strip for a message that applies to the whole screen or app — scheduled maintenance, a trial ending, a new version available. It sits apart from the other status surfaces on purpose: <app-alert> is an inline message about one section of a page, and a toast is a transient pop that disappears on its own. A banner is persistent and page-scoped — it stays until the user dismisses it or the condition that caused it is gone.

Its look comes entirely from the shared @webority/theme, so the Razor <app-banner> and the React <AppBanner> render identically on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the banner above it.

Scheduled maintenance tonight
<app-banner>Scheduled maintenance tonight</app-banner>
Dismissing is wired by webority-ui.jsThe × button removes the banner client-side via data-wui-banner-dismiss; the server doesn't know it was dismissed, so changing a playground control (a fresh server render) always brings the banner back.

Tones

Five tones map to intent — info for a neutral notice, success for a positive update, warning for something needing attention, danger for a serious problem, neutral for a low-key announcement that isn't status at all.

The five tones
Pick the tone by meaning, not by colour — set it to match the intent of the message.
A new version of the app is available. Refresh to update.
Your export finished. Download it from Reports.
Your trial ends in 3 days. Upgrade to keep full access.
Payments are temporarily unavailable — we're on it.
This workspace is read-only during the audit.
Show code 
<app-banner tone="info">A new version of the app is available. Refresh to update.</app-banner>
<app-banner tone="success">Your export finished. Download it from Reports.</app-banner>
<app-banner tone="warning">Your trial ends in 3 days. Upgrade to keep full access.</app-banner>
<app-banner tone="danger">Payments are temporarily unavailable — we're on it.</app-banner>
<app-banner tone="neutral">This workspace is read-only during the audit.</app-banner>

A leading icon

Give it an icon — a Bootstrap Icons name — to reinforce the message at a glance.

With a leading icon
Scheduled maintenance begins at 11:00 PM IST tonight.
Show code 
<app-banner tone="warning" icon="alert-triangle">
    Scheduled maintenance begins at 11:00 PM IST tonight.
</app-banner>

An inline action link

The message is plain inner content, so a link that lets the user act on the banner sits right inside it.

A banner with a call to action
A new version of the app is ready. Refresh now
Show code 
<app-banner tone="info" icon="zap">
    A new version of the app is ready. <a href="/refresh">Refresh now</a>
</app-banner>

Dismissible

Make a banner dismissible and it renders a × the user can click to remove it, wired by webority-ui.js. Reach for it on a notice the user can acknowledge once, not on a condition (an outage, a maintenance window) that should keep reappearing until it's actually over.

A dismissible banner
Refresh the page to see it again — dismissal isn't remembered across a reload.
We rolled out a few improvements to reports. Nothing you need to do.
Show code 
<app-banner tone="info" dismissible="true">
    We rolled out a few improvements to reports. Nothing you need to do.
</app-banner>

When to use

Use it when

  • The message applies to the whole screen or app, not one section of it.
  • It should stay visible until the user dismisses it or the condition it reports ends.
  • It's the kind of thing every user of the page needs to see — maintenance, a trial ending, a new version.

Reach for something else when

  • The message is about one section or form on the page. → app-alert
  • The feedback is brief and self-dismissing — "Saved", "Copied". → WUI.toast
  • You're explaining how something works, not reporting a state. → app-alert accent role="none"

Best practices

Do
Scheduled maintenance begins at 11:00 PM IST tonight.
A page-wide, time-bound notice every visitor needs to see, with a tone that matches its urgency.
Don't
Enter a valid email address in the field below.
A field-level validation message belongs next to the field, not full-bleed across the page — that's app-alert's job.

Every option

The whole surface of the component, one attribute per value — every tone, every icon shape, and the combinations that behave specially.

tone — all five

tone="info"
Message in the info tone
tone="success"
Message in the success tone
tone="warning"
Message in the warning tone
tone="danger"
Message in the danger tone
tone="neutral"
Message in the neutral tone

icon

(no icon)
No leading icon
icon="alert-triangle"
Named icon

dismissible

(default) — no close button
Not dismissible
dismissible="true" — shows a × the user can click
Click the × to dismiss
dismissible + icon + tone combined
Payments are temporarily unavailable — we're on it.

content

plain message
A new version of the app is available.
message with an inline action link
A new version of the app is ready. Refresh now
long content wraps within the banner
This is a deliberately long announcement to show how the banner wraps its message across multiple lines instead of overflowing the page or truncating the text — the body grows to fit whatever content it's given.

unrecognized tone

unknown tone
Throws at render — valid: info, success, warning, danger, neutral

Attributes

AttributeTypeDefaultDescription
(content) *markup—The banner message; may include an inline action link.
toneinfo | success | warning | danger | neutralinfoThe banner's colour/intent. Any unrecognized value falls back to info.
iconstring—A leading icon glyph name.
dismissibleboolfalseShow a close button that removes the banner, wired client-side by webority-ui.js.
onDismiss——React-only; Razor has no server-side dismiss callback (the dismiss button is a client-side DOM removal).