eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
Email Rendering
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
Diagnostics
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
Diagnostics-pt-BR
EmailRealizer-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
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.