Badge - Status

A badge component that displays a label with optional styling variants, icons, and customizable appearance.

The Badges widget provides a flexible way to show labels with different styles and types. It supports various background colors, text styles, and can include icons.

• Types: Success, Warning, Error, Info, Basic
• Content Types: Text label with optional icon
• Customizable: Supports custom styling, padding, and positioning

---

Variants

Basic Badge

Default badge style.

Preview

Code

Badges.status(
  label: 'Default',
)

---

Success Badge

Badge with success styling.

Preview

Code

Badges.status(
  label: 'Success',
  type: BadgeType.success,
)

---

Warning Badge

Badge with warning styling.

Preview

Code

Badges.status(
  label: 'Warning',
  type: BadgeType.warning,
)

---

Error Badge

Badge with error styling.

Preview

Code

Badges.status(
  label: 'Error',
  type: BadgeType.error,
)

---

Info Badge

Badge with info styling.

Preview

Code

Badges.status(
  label: 'Info',
  type: BadgeType.info,
)

---

Badge with Icon

Badge including an icon alongside the label.

Preview

Code

Badges.status(
  label: 'With Icon',
  type: BadgeType.success,
  icon: Padding(
    padding: const EdgeInsets.only(right: 5),
    child: Icon(
      Icons.circle_outlined,
      color: BadgeType.success.fgColor(context),
    ),
  ),
)

---

Properties

Property	Type	Description
label	String	Required. The text to display in the badge.
padding	EdgeInsetsGeometry?	Custom padding for the badge content. Default: horizontal: 8, vertical: 5
offset	Offset?	Position offset for the badge when used with a child widget.
backgroundColor	Color?	Custom background color. If not provided, uses the type’s default color.
textColor	Color?	Custom text color. If not provided, uses the type’s default color.
textStyle	TextStyle?	Custom text style.
alignment	AlignmentGeometry?	Alignment of the badge when used with a child widget.
child	Widget?	Optional child widget that the badge will be attached to.
icon	Widget?	Optional icon to display before the label text.
type	BadgeType	Type of badge (basic, success, warning, error, info). Default: basic