Badge

Examples

Basic Usage
With Icons
Pill Style

NeoBadge(label: "BETA"),

NeoBadge(
  label: "NEW",
  color: theme.colors.success,
),

NeoBadge(
  label: "URGENT",
  color: theme.colors.danger,
),

NeoBadge(
  label: "5 Days",
  icon: (_) => PhosphorIconsRegular.flame,
  color: customPalette.orange,
),

NeoBadge(
  label: "Syncing",
  icon: (_) => PhosphorIconsRegular.spinner,
  isIconRotating: true,
  color: customPalette.purple,
),

NeoBadge(
  label: "Completed",
  icon: (_) => PhosphorIconsRegular.checkCircle,
  color: theme.colors.success,
),

NeoBadge(
  label: "Pro",
  icon: (_) => PhosphorIconsRegular.crown,
  isPill: true,
  color: customPalette.blue,
),

NeoBadge(
  label: "38",
  isPill: true,
  color: theme.colors.danger,
),

NeoBadge(
  label: "Premium",
  icon: (_) => PhosphorIconsRegular.crown,
  isPill: true,
  color: customPalette.yellow,
),

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. Changing this animates between the label and the dot.

Best Practices

Set isIndicator: true when the badge is only a status dot.
Set isIconRotating: true with a spinner icon for a loading state.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Examples

Properties

Required

Content

Styling

Best Practices

​Examples

​Properties

​Required

​Content

​Styling

​Best Practices

Examples

Properties

Required

Content

Styling

Best Practices