Skip to main content

​
Examples

  • Basic Usage
  • With Icons
  • Pill Style
Basic badge example

Simple badges with text content.

NeoBadge(label: "BETA"),

​
Properties

​
Required

​
label
String
required
The text content of the badge.

​
Content

​
icon
PhosphorIconData Function(PhosphorIconsStyle)
An optional icon to display before the label. Use PhosphorIcons.yourIconName.
​
isIconRotating
bool
default:"false"
Whether the icon should continuously rotate. Useful for loading states or activity indicators.

​
Styling

​
color
Color
default:"theme.colors.fgSecondary"
The color of the badge. This affects the label, icon, and background colors.
​
isPill
bool
default:"false"
Whether to use fully rounded corners (pill style) instead of the default small border radius.
​
isIndicator
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: true for subtle status indicators where the context is clear.
  • Combine icons like PhosphorIcons.spinner or PhosphorIcons.circleNotch with isIconRotating: true for loading or syncing states.

​
Integration Notes

  • NeoBadge smoothly morphs between label/icon display and indicator dot when isIndicator changes.
⌘I