Feedback & status

AppStatusBadge

A status pill mapped from a record’s state — Active, Pending, Failed — in a consistent tone.

<app-status-badge label="Active" tone="success" />

A status badge is a small pill that shows where a record stands — Active, Pending, Failed, Draft. It's the pill in a table's status column and beside a record's title, giving the state a consistent colour so a user reads a whole list at a glance.

The library owns only the look; your app maps its own status enum to a label and a tone. Its look comes entirely from the shared @webority/theme, so the Razor <app-status-badge> and the React <AppStatusBadge> 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 badge above it.

Active 
<app-status-badge label="Active" />

Tones

Five tones cover the common lifecycle states — green for healthy/active, amber for pending or in-progress, red for failed or blocked, blue for informational, grey for neutral or inactive.

The lifecycle tones
Active Pending Failed Draft Archived
Show code 
<app-status-badge label="Active" tone="success" />
<app-status-badge label="Pending" tone="warning" />
<app-status-badge label="Failed" tone="danger" />
<app-status-badge label="Draft" tone="info" />
<app-status-badge label="Archived" tone="neutral" />
Map the enum once, in one placeKeep the status-to-tone mapping in a single small helper, not scattered across screens. One source of truth means a given status always renders the same label and colour wherever it appears.

Empty state

With no label the badge renders an em-dash — the tidy “nothing to show” placeholder for an empty table cell.

No label → em-dash
-
Show code 
<app-status-badge />

When to use

Use it when

  • You are showing where a record stands — a lifecycle or workflow status.
  • A table has a status column that should read consistently down the list.
  • You are mapping a status enum to a coloured pill.

Reach for something else when

  • You are showing a count or a short static label. → AppBadge
  • The token should be removable (a filter/tag). → AppChip
  • The user is picking one option from a set. → AppChoiceChip
  • It is a persistent inline message. → AppAlert

Best practices

Do
Active Pending Failed
Each status maps to a consistent, meaningful tone — the colour reinforces the word.
Don't
Active Pending Failed
One tone for every status throws away the signal — the colour tells the user nothing.
Do
Failed
A single, concise status word — instantly scannable.
Don't
Payment failed — retry scheduled for tomorrow
A pill is not a place for a sentence — keep the status to a word or two and explain elsewhere.

Every option

The whole surface of the component, one cell per value — every semantic tone and every label edge case.

tone — every semantic value

tone="success"
Status
tone="warning"
Status
tone="danger"
Status
tone="info"
Status
tone="primary"
Status
tone="neutral"
Status

label

(omitted) → em-dash
-
label="" → em-dash
-
inner content — Razor has no ReactNode label, but child markup composes the same way
Live
long label — no truncation, the pill grows
Payment failed — retry scheduled for tomorrow

class — appended, not replaced

class="analytics-pill"
Active

Attributes

AttributeTypeDefaultDescription
labelstring—The status text. Omit (or pass empty) to render an em-dash.
tonestringneutralSemantic tone — success | warning | danger | info | primary | neutral. Same vocabulary as the React component.
classstring—Not a bound tag-helper property — an ordinary HTML class attribute on <app-status-badge> is preserved and appended after the tone class, the same behaviour as the React className prop.
tooltipstring—A collision-aware hover/focus tooltip (Bootstrap/Popper, same engine as <app-tooltip>) that flips to stay on-screen — useful to spell out a terse status pill's full meaning.
tooltip-placementstringautoauto | top | bottom | start | end — preferred tooltip side; auto picks the side with the most room.