OudsBadge class

OUDS Badge design guidelines

Reference design version : 1.2.0

Badge is a UI element that emphasizes system notifications, status, or the categorization of an information, throughout colour only. Badge is rendered as a coloured shape, without icon, text or number; and its chosen size remains unchanged regardless of the changes of the interface size.

Badges have five statuses depending on the context of the information they represent. Each status is designed to convey a specific meaning and ensure clarity in communication.

A11Y recommendation: Provide a semanticsLabel semantics to clarify the meaning of this badge.

This widget provides three distinct types of badges, each created using a specific named constructor:

• OudsBadge.standard: A simple dot, useful for indicating a status or the presence of new, unquantified items.
• OudsBadge.count: Displays a numerical value or short text. The text is only visible for medium and large sizes. For numerical labels of 100 or more, it displays "+99".
• OudsBadge.icon: Displays an icon within the badge. The icon is only visible for medium and large sizes.

This API replaces the previous generic constructor and deprecated status model.

Migration overview

1) Use named constructors

Replace the deprecated default constructor:

• OudsBadge(...) with one of:
• OudsBadge.standard(...)
• OudsBadge.count(...)
• OudsBadge.icon(...)

2) Replace OudsBadgeStatus with OudsIconStatus

OudsBadgeStatus is deprecated and will be removed. Use OudsIconStatus subclasses to define badge visual semantics.

3) Remove icon parameter

The icon parameter is deprecated and will be removed. Icon selection must now be driven by status (OudsIconStatus):

• Functional statuses (Positive, Info, Warning, Negative) provide fixed icons.
• Contextual statuses (Neutral, Accent) can carry a custom icon asset.

Status model

New status type:

• Neutral (optional custom icon)
• Accent (optional custom icon)
• Positive (fixed functional icon)
• Info (fixed functional icon)
• Warning (fixed functional icon)
• Negative (fixed functional icon)

This unifies:

• background color
• icon choice
• icon/text foreground color

Behavior notes

• count text is visible only for OudsBadgeSize.medium and OudsBadgeSize.large.
• Numeric values >= 100 are formatted as +99.
• icon is visible only for OudsBadgeSize.medium and OudsBadgeSize.large.
• For accessibility, always provide semanticsLabel.

Parameters :

• status : The badge's status, influencing its color and style (e.g., negative, positive, warning). Used by OudsBadge.standard and OudsBadge.count.

• size : The size of the badge, such as medium, large, etc., to fit various visual needs.

• label : An optional text to display inside the badge, often used for numbers or status texts. Used by OudsBadge.count

• icon : An optional SVG asset name to display an icon within the badge, complementing or replacing the label.

• status : The status of the badge. The background color of the badge and the icon color are based on this status. Used by OudsBadge.icon There are two types of status:

  • Non-functional statuses: Neutral or Accent Using a non-functional status, you can provide a custom icon related to the badge’s context.
  • Functional statuses: Positive, Warning, Negative, Info. Each functional status has its dedicated functional icon that matches the meaning of the badge.

• child : A custom widget to insert inside the badge for advanced customization.

• semanticsLabel: An optional accessibility label read by screen readers, providing a clear description of the badge's meaning (e.g., "5 new notifications", "Error", "Success").

Styling details :

• The size and margins are adjusted according to the badge size via OudsBadgeSize.

The badge's appearance can be customized using parameters for status, size, and content.

Usage examples:

Standard badge

OudsBadge.standard(
  status: Negative(),
  size: OudsBadgeSize.medium,
  semanticsLabel: 'Erreur',
  child: const Icon(Icons.mail),
)

Count badge

OudsBadge.count(
  label: '12',
  status: Info(),
  size: OudsBadgeSize.large,
  semanticsLabel: '12 notifications',
  child: const Icon(Icons.notifications),
)

Icon badge with functional status icon

OudsBadge.icon(
  status: Warning(),
  size: OudsBadgeSize.large,
  semanticsLabel: 'Avertissement',
  child: const Icon(Icons.settings),
)

Icon badge with custom icon (Neutral/Accent)

OudsBadge.icon(
  status: Accent(icon: 'assets/heart-empty.svg'),
  size: OudsBadgeSize.large,
  semanticsLabel: 'Favorite',
  child: const Icon(Icons.person),
)