Feedback & status

AppAlert

A persistent inline status banner — info, success, warning, or danger — that stays on the page.

<app-alert variant="info">…</app-alert>

<app-alert> is the shared status banner — a persistent, inline message that stays on the page: a form-level error, a trial-ending warning, an informational notice, a success confirmation. It wraps react-bootstrap's <Alert> so screens use it instead of a raw class="alert alert-…".

Its look comes entirely from the shared @webority/theme, so the Razor <app-alert> and the React <AppAlert> 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 alert above it.

body variant title icon dismissible role bordered accent size action image image-alt image-size

Something happened.

<app-alert>Something happened.</app-alert>

dismissible without a close handlerSetting dismissible="true" renders the × — bootstrap.bundle.js (loaded on the sandbox) removes the alert from the DOM on click, no server round-trip needed. React behaves the same: the alert removes itself, and onClose only tells your state it happened.

Variants

Four tones map to intent — info for neutral notices, success for confirmations, warning for things needing attention, danger for errors.

The four variants

Pick the tone by meaning, not by colour — set the variant to match the intent of the message.

Reports use the latest IEC 62305-2 methodology.

Invite sent. The user will appear once they accept.

Your trial ends in 3 days. Upgrade to keep full access.

Something went wrong while saving. Please try again.

Show code

<app-alert variant="info">Reports use the latest IEC 62305-2 methodology.</app-alert>
<app-alert variant="success">Invite sent. The user will appear once they accept.</app-alert>
<app-alert variant="warning">Your trial ends in 3 days. Upgrade to keep full access.</app-alert>
<app-alert variant="danger">Something went wrong while saving. Please try again.</app-alert>

Persistent, not transientAn alert stays until the state that caused it changes (or the user dismisses it). For a brief, self-dismissing confirmation — “Saved”, “Copied” — reach for a toast instead; don't stack transient feedback into a banner.

In context

The most common use is a form-level error at the top of a form — it names the problem and stays until the user fixes it and resubmits.

A form-level error

Placed above the fields, a danger alert states what failed and what to do next.

We couldn't save your changes — check the highlighted fields and try again.

Show code

<app-alert variant="danger">We couldn't save your changes — check the highlighted fields and try again.</app-alert>

Heading & icon

Give an alert a bold title line with the title attribute, and a leading glyph with icon (a Bootstrap Icons name). Both are optional — an alert with neither renders exactly as the plain banner above.

A titled, iconed alert

The title reads as the headline; the body carries the detail. The icon reinforces the tone at a glance.

Payment failed

Your card was declined. Update your billing details and try again.

All set

Your workspace is ready. Invite your team to get started.

Show code

<app-alert variant="danger" icon="alert-circle" title="Payment failed">Your card was declined. Update your billing details and try again.</app-alert>
<app-alert variant="success" icon="check-circle" title="All set">Your workspace is ready. Invite your team to get started.</app-alert>

Custom image

Set image (a URL) to show a picture in the badge instead of the icon glyph — a product logo or brand mark. The image fills the circle; the variant still drives the tint, heading and halo.

A logo in the badge

image replaces the glyph. Give it image-alt for accessibility.

Capnix

Your Capnix advisor has the full terms if you need them.

Invite sent. The user will appear once they accept.

Show code

<app-alert variant="info" title="Capnix" image="/brand/capnix.png" image-alt="Capnix">Your Capnix advisor has the full terms if you need them.</app-alert>

Dismissible

Some notices are an acknowledgement the user can clear once they've read them. Make an alert dismissible and it renders a × the user can click to remove it — reach for it on a notice that has served its purpose once seen, not on an error that must stay until its cause is fixed.

A dismissible notice

The × removes the alert. Use it for an informational notice the user can acknowledge, not for a form error that should persist until it's resolved.

Reports use the latest IEC 62305-2 methodology.

Show code

<app-alert variant="info" dismissible="true">Reports use the latest IEC 62305-2 methodology.</app-alert>

Borderless

Set bordered="false" to drop the soft variant ring and keep only the tint fill — for alerts sitting inside an already-bordered card or a denser layout where the extra ring is visual noise.

Without the border

Same tint and badge, no outline. The default (bordered) sits on top for comparison.

Bordered (default) — soft ring.

Borderless — tint fill only.

Payment failed

Update your billing details and try again.

Show code

<app-alert variant="info">Bordered (default) — soft ring.</app-alert>
<app-alert variant="info" bordered="false">Borderless — tint fill only.</app-alert>
<app-alert variant="danger" bordered="false" title="Payment failed">Update your billing details and try again.</app-alert>

Explaining part of the page

An alert can also explain something that stays on the page: how a figure is worked out, what happens next. Give it role="none" so a screen reader reads it as ordinary content instead of breaking in, and accent for the thick left edge that marks it as an aside.

An aside with a trailing action

accent draws the left edge; an <app-alert-action> child pins a button to the right (it drops below the text on phones); size="sm" is a compact single line.

How this is worked out

Reports use the latest IEC 62305-2 methodology.

Your plan renews on 1 Sep.

Two documents are still missing.

Show code

<app-alert variant="info" accent="true" role="none" title="How this is worked out">
    Reports use the latest <strong>IEC 62305-2</strong> methodology.
</app-alert>
<app-alert variant="info" accent="true" role="none">
    <app-alert-action><app-button size="sm" variant="secondary">Renew</app-button></app-alert-action>
    Your plan renews on 1 Sep.
</app-alert>
<app-alert variant="warning" size="sm" role="status">Two documents are still missing.</app-alert>

role decides what it is, not the lookKeep the default role="alert" only for a state the user must hear now. Guidance that is part of the page takes role="none"; otherwise every explanation interrupts a screen reader and users learn to ignore alerts.

When to use

Use it when

A message needs to persist on the page while its cause is true — a form error, a trial warning.
You are stating status inline, in context, next to the thing it concerns.
The user should be able to re-read it — it isn’t a fleeting confirmation.
You are explaining how something works, as page content (accent, role="none").

Reach for something else when

The feedback is brief and self-dismissing — “Saved”, “Copied”. → toast
It is a small count or a one-word label. → AppBadge
It maps a status enum to a coloured pill. → AppStatusBadge
It is a help hint tied to a single field label. → AppInfoTip

Best practices

We couldn't save your changes — check the highlighted fields and try again.

Match the variant to intent and say what to do next. A danger alert names the problem and the recovery.

Don't

Something went wrong while saving.

A success (green) tone on an error message contradicts the words — the colour lies about what happened.

Reports use the latest IEC 62305-2 methodology.

A neutral, informational notice uses the info tone — calm, not alarming.

Don't

Reports use the latest IEC 62305-2 methodology.

A warning (amber) tone on a purely informational message implies a problem that isn’t there.

Every option

The whole surface of the component, one cell per value.

variant — all four

variant="info"

An alert in the info tone.

variant="success"

An alert in the success tone.

variant="warning"

An alert in the warning tone.

variant="danger"

An alert in the danger tone.

title & icon

(default) — no title, no icon

Plain body.

title only

Payment failed

Your card was declined.

icon only

A note with a leading glyph.

title + icon

Payment failed

Your card was declined.

icon — a node icon is React-only; Razor takes a Bootstrap Icons name

Custom glyph

Named icons only on this surface.

dismissible

(default) — not dismissible

No close button.

dismissible="true" — removed client-side by bootstrap.bundle.js

Close button appears.

dismissible + icon + title

Heads up

Everything together.

role

(default) role="alert"

An assertive notice.

role="status"

A non-assertive notice.

content — long text, no width cap

long body — wraps within the alert, no overflow

Heads up

This is a considerably longer alert body meant to show how the component wraps multi-line content without breaking layout, overflowing its container, or truncating the message the user needs to read in full.

Attributes

Attribute	Type	Default	Description
(content) *	`string`	—	The alert message (inner content).
variant	`info \| success \| warning \| danger`	`info`	Tone, mapped to intent. Set it to match the message.
title	`string`	—	A bold heading line above the body (`.alert-heading`).
icon	`string`	—	A leading Bootstrap Icons glyph name.
image	`string`	—	A custom image URL shown in the badge instead of the icon glyph.
image-alt	`string`	—	Alt text for the custom image.
image-size	`int`	-	Width and height of the image badge in px. Unset, it follows `size` (20, 24, 28 or 32px).
dismissible	`bool`	`false`	Render a × the user can click to dismiss the alert.
role	`string`	`alert`	alert (default) \| status \| none — "status" for non-assertive notices; "none" for explanatory page content (no role attribute is written). An unknown value throws.
bordered	`bool`	`true`	Draw the soft variant border. `false` keeps only the tint fill.
accent	`bool`	`false`	A thick variant-coloured left edge, marking the alert as an aside. Kept with `bordered="false"`.
size	`sm \| md \| lg`	`md`	`sm` is a compact single line; `lg` is roomier, with a larger heading, body and badge. An unknown value throws.
<app-alert-action>	`child`	-	A trailing action pinned to the right (React `action`), usually an `<app-button>`. It drops below the text on phones.

Playground

Variants

In context

Heading & icon

Custom image

Dismissible

Borderless

Explaining part of the page

When to use

Use it when

Reach for something else when

Best practices

Every option

variant — all four

title & icon

dismissible

role

content — long text, no width cap

Attributes

Related