Examples
- Basic Usage
- With Icons
- Pill Style
Simple badges with text content.
Properties
Required
String
required
The text content of the badge.
Content
Object Function(PhosphorIconsStyle)?
An optional icon callback from
phosphoricons_flutter (e.g. (_) => PhosphorIconsRegular.flame). NeoBadge requests the bold style.bool
default:"false"
Whether the icon should continuously rotate. Useful for loading states or activity indicators.
Styling
Color
default:"theme.colors.fgSecondary"
The color of the badge. This affects the label, icon, and background colors.
bool
default:"false"
Whether to use fully rounded corners (pill style) instead of the default small border radius.
bool
default:"false"
Whether to display as a minimal indicator dot instead of showing label and icons. When true, only a small colored circle is shown.
Best Practices
- Use
isIndicator: truefor subtle status indicators where the context is clear. - Combine icons like
PhosphorIconsRegular.spinnerorPhosphorIconsRegular.circleNotchwithisIconRotating: truefor loading or syncing states.
Integration Notes
- NeoBadge smoothly morphs between label/icon display and indicator dot when
isIndicatorchanges.