Build

Block Message

Description

A block message keeps users informed of important changes, typically contextual alerts, status updates, or warnings.

Component Preview

This is the default message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

info

This is an informational message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

check_circle

This is a success message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

error

This is an error message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

warning

This is a warning message

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alerts

info

This is an informational alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

warning

This is a warning alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

error

This is a severe alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

check_circle

This is a clear alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Dos and Dont’s

Do

  • Use only once on a page
  • Choose the proper contextual alert level (informational, warning, danger)
  • Write the message in concise, plain language and avoid jargon.
  • Use website alerts when you need to communicate time-sensitive, critical, or action-required information that directly impacts the user’s current task or system safety

Don’t

  • Don’t use with long messages.