Small alert

Users browse pages, scanning quickly for useful or interesting information. If important information is buried within the page content, users can easily miss it.

Small alerts can be on different locations of the page. They should be used to deliver applicable information to users in a highly visible and immediate manner, ensuring that they are promptly informed and able to respond accordingly.


Component data

Component resources:
SCSS files

Functional grouping: Status and alerts

Demo

Configure: select the dropdowns below to display the variety of options that a small alert supports.

Select small alert type:

  • Warnings
  • Warning lifted
  • Caution
  • Important information
Caution label

Code


				
			

Responsive preview

Alert label:

  • should be concise and descriptive

Alert icon:

  • serves as a visual cue to correlate with an alert type
Banner options
Class name Colour Recommended icon Usage
"warning" or "error" red

 cicon-exclamation-triangle

Display system errors messages that users must read before continuing to use an application. Example:

  • form is missing information and could not be submitted
  • network error occurred
"caution" yellow

 cicon-exclamation-triangle

Alert users to exercise care or attention regarding specific information.

"information" blue

 cicon-exclamation-circle

Highlight crucial details that users need to know or that will help them performing a task.

"success" green

 cicon-check-circle

Indicates an action that has been completed successfully. Example:

  • form has been submitted successfully
  • setting has been saved

Do

Make sure to choose the right alert type, using the wrong type can confuse users

Keep the title and description clear and concise so users understand why the information is important and the action(s) to take.

Place small alerts inline with the related content, so users know what it refers to.

Error messages must guide the user on how to recover from an error.

Don't

Do not write messages that are ambiguous or unhelpful for users. An alert that says 'System is down' without providing specifics or guidance is ineffective.

Do not use to Highlighting content, quotes, examples, snippets of information. Use a callout instead.