Examples
- Basic Usage
- With Icons
- Pill Style
Simple badges with text content.
Properties
Required
String
required
The text content of the badge.
Content
PhosphorIconData Function(PhosphorIconsStyle)
An optional icon to display before the label. Use
PhosphorIcons.yourIconName.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
PhosphorIcons.spinnerorPhosphorIcons.circleNotchwithisIconRotating: truefor loading or syncing states.
Integration Notes
- NeoBadge smoothly morphs between label/icon display and indicator dot when
isIndicatorchanges.