OudsAlertMessage class

OUDS Alert Message design guidelines

Reference design version : 1.1.0

Alert message is a UI element that displays system feedback, status changes or required action; throughout detailed, prominent, persistent and actionable communication. Alert message includes functional icon and semantic colour, and may include as well a close button and/or action link. Alert Message does not disappear automatically and remains visible until dismissed or resolved by the user.

Parameters :

• label: Label displayed in the alert message. Main message that should be short, clear, and readable at a glance.
• status: The status of the alert message. Its background color and its icon color are based on this status. There are two types of statuses:
• Non-functional statuses Neutral or Accent used for informational or decorative alert messages. They provide context or highlight content without implying a specific state, system event, or user action. These alerts are not tied to UX patterns such as success, error, or warning, and may use contextual or brand-related icons to enhance recognition or storytelling.
• Functional statuses communicate specific system statuses, results, or user feedback: Positive, Warning, Negative, Info. Each variant conveys a clear semantic meaning and must always be paired with its dedicated functional icon to ensure clarity and accessibility. Use functional alerts to inform user about state changes, confirmations, or issues that are directly connected to system logic or user actions. These messages carry functional meaning and help guide user response or acknowledgment.
• description: Optional supplementary text in an alert message. Use only when additional detail or guidance is needed beyond the label. It should remain short, clear and scannable, helping the user to understand what happened and what he can do next.
• onClose: Callback invoked when the close button is clicked. If null, the close button is not displayed and the alert message remains visible until the context changes (e.g., the issue is resolved, the screen is refreshed). Otherwise, the alert message is dismissable and includes a close button, allowing the user to dismiss it when he has acknowledged the message. Some alerts must remain visible to ensure user is aware of important information; others can be closed to reduce visual clutter.
• actionLayout: An optional action link to be displayed in the alert message. It can be used to trigger an action.
• bulletList: An optional list of bullet points to be displayed in the alert message following the label or the optional description. Add this list when you need to highlight multiple points, such as service features, plan details, or next steps. Each bullet should be short and written as a clear phrase or fragment — avoid long sentences or complex structures.

Usage Example:

OudsAlertMessage(
  label: 'Your profile has been updated.',
  status: Positive(),
  onClose: () {},
)