With many notifications appearing over time, users may have trouble distinguishing notifications that require immediate action from those that are purely informational or those that require less time-sensitive action.

User story

Suppose your management has given you the following user story to implement:

As a finance user, I want to know whether a notification is about a failure or warning, so I can prioritize fighting fires above other issues.

Recipe

To help users see the urgency of a notification, you can use a NotificationIndicator, which consists of a type and a text string. The type property can take one of three values:

failure: A previous action by the user has failed; displays with a red header.
warning: An urgent condition has occurred; displays with an amber header.
success: A previous action or situation has successfully resolved; displays with a green header.

The text gives a brief summary of the condition (limited to 32 characters), such as “Trade failed.”

Code example

const notification = {
   "title": "US added 138K jobs; Lower than target 185ke",
   "category": "News",
   "body": "After more than a decade of growth, U.S. nonfarm payrolls shrunk by 701,000, and the unemployment rate rose to 4.4%...",
   "icon": "http://cdn.openfin.co/examples/notifications/company-B.png",
   "indicator": {
       "type": "warning",
       "text": "News Alert"
   }
}
create(notification);

Best practice

Use urgency indicators with caution, as over-using them can lead users to ignore failures or warnings that are truly urgent. Especially be careful with the success type, as it often doesn’t require action by the user. However, compliance with regulations may require that your application reports successful execution of actions or algorithms, which is why that type is available.