Skip to main content

​
Badges

Badge components are used to display notifications, counts, labels, and status indicators in your application.

​
ChromiaBadge

A customizable badge component for displaying notifications and indicators on other widgets.

​
Basic Usage

ChromiaBadge(
  child: Icon(Icons.notifications),
  value: '5',
)

​
Parameters

​
child
Widget
required
The widget to display the badge on.
​
value
String?
The value to display in the badge. If null or empty, displays a dot badge.
​
showBadge
bool
default:"true"
Whether to show the badge.
​
position
ChromiaBadgePosition?
Position of the badge relative to the child. Default is top right.
​
backgroundColor
Color?
Background color of the badge.
​
textColor
Color?
Text color of the badge.
​
size
ChromiaBadgeSize
default:"ChromiaBadgeSize.medium"
Size of the badge. Options: small (16px), medium (18px), large (20px).
​
shape
ChromiaBadgeShape
default:"ChromiaBadgeShape.circle"
Shape of the badge. Options: circle, rounded, square.
​
maxValue
int
default:"9"
Maximum value to display. Values above this show as “99+”.

​
Examples

​
Notification Badge

ChromiaBadge(
  child: Icon(Icons.notifications),
  value: '5',
)

​
Dot Badge

ChromiaBadge(
  child: Icon(Icons.message),
)

​
Custom Position

ChromiaBadge(
  child: Icon(Icons.shopping_cart),
  value: '12',
  position: ChromiaBadgePosition.topLeft(),
)

​
Custom Colors

ChromiaBadge(
  child: Icon(Icons.mail),
  value: '3',
  backgroundColor: Colors.green,
  textColor: Colors.white,
)

​
High Count Badge

ChromiaBadge(
  child: Icon(Icons.notifications),
  value: '150',
  maxValue: 99, // Shows as "99+"
)

​
Conditional Badge

ChromiaBadge(
  child: Icon(Icons.inbox),
  value: '0',
  showBadge: hasUnreadMessages,
)

​
ChromiaBadgePosition

Factory methods for positioning badges:
  • ChromiaBadgePosition.topRight({double? offset}) - Top right corner (default)
  • ChromiaBadgePosition.topLeft({double? offset}) - Top left corner
  • ChromiaBadgePosition.bottomRight({double? offset}) - Bottom right corner
  • ChromiaBadgePosition.bottomLeft({double? offset}) - Bottom left corner

​
ChromiaLabel

A standalone badge that can be used inline as a label or tag.

​
Parameters

​
text
String
required
Text to display in the label.
​
backgroundColor
Color?
Background color of the label.
​
textColor
Color?
Text color of the label.
​
icon
IconData?
Optional icon to display before the text.
​
onRemove
VoidCallback?
Callback when the remove button is pressed. If provided, displays a close icon.
​
borderRadius
BorderRadiusGeometry?
Custom border radius for the label.

​
Examples

​
Simple Label

ChromiaLabel(
  text: 'New',
)

​
Label with Icon

ChromiaLabel(
  text: 'Featured',
  icon: Icons.star,
  backgroundColor: Colors.amber,
  textColor: Colors.white,
)

​
Removable Label (Tag)

ChromiaLabel(
  text: 'Flutter',
  onRemove: () => print('Removed Flutter tag'),
)

​
Custom Styled Label

ChromiaLabel(
  text: 'Premium',
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  icon: Icons.workspace_premium,
)

​
ChromiaStatusBadge

A status badge for showing status indicators with optional text.

​
Parameters

​
status
ChromiaStatusType
required
Status type. Options: success, warning, error, info, neutral.
​
text
String?
Optional status text to display next to the status dot.
​
showDot
bool
default:"true"
Whether to show the status dot.

​
Examples

​
Status Dot Only

ChromiaStatusBadge(
  status: ChromiaStatusType.success,
)

​
Status with Text

ChromiaStatusBadge(
  status: ChromiaStatusType.success,
  text: 'Online',
)

​
Warning Status

ChromiaStatusBadge(
  status: ChromiaStatusType.warning,
  text: 'Pending',
)

​
Error Status

ChromiaStatusBadge(
  status: ChromiaStatusType.error,
  text: 'Failed',
)

​
Info Status

ChromiaStatusBadge(
  status: ChromiaStatusType.info,
  text: 'Processing',
)

​
Text Only (No Dot)

ChromiaStatusBadge(
  status: ChromiaStatusType.neutral,
  text: 'Draft',
  showDot: false,
)

​
Enums

​
ChromiaBadgeSize

  • small - 16px height
  • medium - 18px height (default)
  • large - 20px height

​
ChromiaBadgeShape

  • circle - Circular badge
  • rounded - Rounded rectangle badge
  • square - Square badge with slight rounding

​
ChromiaStatusType

  • success - Green indicator
  • warning - Yellow indicator
  • error - Red indicator
  • info - Blue indicator
  • neutral - Gray indicator

Build docs developers (and LLMs) love

Get started for freeTalk to us