eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsSurfaces & display
Badge
View source
1 min read
A count or presence marker. Values past Max render as "99+"; Dot drops the number entirely.
1
using eQuantic.UI.Components;
FORMS
7
count
99+
over Max
Dot
7
Neutral
7
Ring
Usage
1
new Badge(count: 7) { Max = 99, Variant = Variant.Destructive, Ring = true }
API
Prop
Type
Default
Description
Count
int
0
The number. Zero renders nothing — a zero badge is noise.
Max
int
99
Overflow threshold; past it the badge reads "99+".
Variant
Variant
Primary
Semantic colour of the badge.
Neutral
bool
false
Uses the neutral surface instead of a variant colour.
Dot
bool
false
Presence-only marker with no number.
Ring
bool
false
Adds a background-coloured ring so the badge reads over busy anchors.
States
State
Rendering
Count
Numeric
Overflow
"99+"
Dot
Small circle
Zero
Nothing painted
Accessibility
•
Merge the badge into the anchor's name — "Notifications, 7 new". A decorative dot is hidden when the state is announced elsewhere.
When to use
•
Unread counts and status that must be visible without opening anything.
Avoid
•
Badges on many items at once — everything urgent means nothing is.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/Badge.cs.