Tag

A Tag is a compact visual indicator used to represent status, category, or metadata associated with an element. It helps users quickly scan, identify, or filter information in an interface.

Use this component when you need to communicate contextual information such as system state, item classification, or feedback message type.

Common alternative names:
Status Pill, Badge Label, Indicator

---

Variants

Basic

Default tag style.

Preview

Code

Tag(
  label: 'Default',
)

---

Success

Tag with success styling.

Preview

Code

Tag(
  label: 'Success',
  type: BadgeType.success,
)

---

Warning

Tag with warning styling.

Preview

Code

Tag(
  label: 'Warning',
  type: BadgeType.warning,
)

---

Error

Tag with error styling.

Preview

Code

Tag(
  label: 'Error',
  type: BadgeType.error,
)

---

Info

Tag with info styling.

Preview

Code

Tag(
  label: 'Info',
  type: BadgeType.info,
)

---

Tag with Icon

Tag including an icon alongside the label.

Preview

Code

Tag(
  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.