Feedback & status

AppBadge

A small count or label badge — the “3” on a nav item, a “New” tag beside a title.

<app-badge tone="primary">New</app-badge>

A badge is a tiny inline marker — a count on a nav item, a short label like “New” or “Beta” next to a heading. It draws a small amount of attention to the thing it sits on without taking a line of its own.

<app-badge> is for counts and short labels. For a status mapped from an enum reach for <app-status-badge>. Its look comes entirely from the shared @webority/theme, so the Razor <app-badge> and the React <AppBadge> 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.

New 
<app-badge>New</app-badge>

Tones

Each tone carries meaning — primary to highlight, success for positive, warning to caution, danger for a problem or count that needs attention, info for neutral emphasis.

The tones
Primary Approved Needs review Overdue Info
Show code 
<app-badge tone="primary">Primary</app-badge>
<app-badge tone="success">Approved</app-badge>
<app-badge tone="warning">Needs review</app-badge>
<app-badge tone="danger">Overdue</app-badge>
<app-badge tone="info">Info</app-badge>
Tone is meaning, not decorationPick a tone because it signals something — danger for an overdue count, success for an approved tag. A rainbow of tones on peer badges just adds noise.

Counts & labels

The two everyday jobs: a numeric count beside a label, and a one- or two-word tag next to a title.

A count and a label
Inbox 3 Lightning Report New
Show code 
<span>Inbox <app-badge tone="danger">3</app-badge></span>
<span>Lightning Report <app-badge tone="primary">New</app-badge></span>

When to use

Use it when

  • A count sits beside a label — an unread inbox, a pending queue.
  • A short static tag marks something — “New”, “Beta”, “Pro”.
  • You need a tiny inline emphasis that fits on the same line as its text.

Reach for something else when

  • You are showing a status mapped from an enum. → AppStatusBadge
  • The token should be removable (a filter/tag). → AppChip
  • It performs an action when clicked. → AppButton
  • It is a persistent inline message. → AppAlert

Best practices

Do
Notifications 12
A short count attached to its label — the badge reads instantly.
Don't
This item was updated 3 minutes ago by an editor
A sentence in a badge is the wrong tool — badges hold a word or a number, not prose.
Do
New
A neutral “New” tag in one intentional tone.
Don't
New New New
The same label in three tones invents meaning that isn’t there — one tag, one tone.

Every option

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

tone — neutral | primary | success | warning | danger | info

(none, default)
Badge
tone="neutral"
Badge
tone="primary"
Badge
tone="success"
Badge
tone="warning"
Badge
tone="danger"
Badge
tone="info"
Badge
unknown tone
Throws at render — valid: neutral, primary, success, warning, danger, info

dot

(default, no dot)
3
dot — combined with tone
3

content shape

number
12
short label
New
empty content
class — extra class alongside tone/dot
Tracked

Attributes

AttributeTypeDefaultDescription
(content) *string—Badge content — a short label or a number.
toneneutral | primary | success | warning | danger | info—Colour tone. Omit (or pass neutral) for the base badge — pick a tone for meaning. An unrecognized tone is passed through verbatim as badge-<tone>.
dotbool—Render a leading dot before the content.
tooltipstring—A collision-aware hover/focus tooltip (Bootstrap/Popper, same engine as <app-tooltip>) that flips to stay on-screen.
tooltip-placementauto | top | bottom | start | endautoPreferred tooltip side; auto picks the side with the most room.