Badge

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    FBadge(child: const Text('New')),
    const SizedBox(width: 8),
    FBadge(
      style: FBadgeStyle.secondary,
      child: const Text('3'),
    ),
  ],
);

Column(
  children: [
    FBadge(
      style: FBadgeStyle.primary,
      child: const Text('Primary'),
    ),
    const SizedBox(height: 8),
    FBadge(
      style: FBadgeStyle.secondary,
      child: const Text('Secondary'),
    ),
    const SizedBox(height: 8),
    FBadge(
      style: FBadgeStyle.outline,
      child: const Text('Outline'),
    ),
    const SizedBox(height: 8),
    FBadge(
      style: FBadgeStyle.destructive,
      child: const Text('Destructive'),
    ),
  ],
);

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    FBadge(
      style: FBadgeStyle.primary,
      child: const Text('3'),
    ),
    const SizedBox(width: 8),
    FBadge(
      style: FBadgeStyle.secondary,
      child: const Text('99+'),
    ),
  ],
);

FBadge.raw(
  builder: (context, style) => Container(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
    decoration: style.decoration,
    child: Text('Custom', style: style.contentStyle.labelTextStyle),
  ),
);