Badge

Badges are used to label items with status or type.

Basic Usage

The default badge is neutral and has a background.

Badge(
  child: Text('Neutral'),
)

Variants

Badges support several semantic variants: neutral, success, warning, danger, and info.

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: [
    Badge(variant: BadgeVariant.neutral, child: Text('Neutral')),
    Badge(variant: BadgeVariant.success, child: Text('Success')),
    Badge(variant: BadgeVariant.warning, child: Text('Warning')),
    Badge(variant: BadgeVariant.danger, child: Text('Danger')),
    Badge(variant: BadgeVariant.info, child: Text('Info')),
  ],
)

Content

You can add an icon to the badge using the icon property.

Badge(
  icon: Icon(PrimeIcons.viamFlutter),
  child: Text('Badge with Icon'),
)

Appearance

You can remove the background by setting showBackground to false.

Badge(
  showBackground: false,
  child: Text('No Background'),
)