Alert

Alerts communicate state that affects a form, feature or a page.

#

#

Use the info type for messages that are neutral in tone.

#

Use the subtle type for neutral messages when a blue theme may feel too loud.

#

Use the error type to show a critical error that needs to be immediately addressed.

#

Use the warning type to show a potential issue that may need to be addressed soon.

#

Disable text balancing if an alert is not wrapping well.

#

Use the success type to show positive results or messaging.

#

Use the upsell type to display billing plans or unlockable product features.

#

All alerts should be dismissible, unless it's critical to show them at all times.

#

Show contextual info, such as timeframe, in the context. Be brief.

#

If possible, add action(s) to the alert to offer user a quick way to resolve it. Use the secondary button variant if there is only one action.

Actions can also be links to external URLs.

#

Centered alerts are shorter than their left justified counterparts. Content in centered alerts should be kept to a minimum so it does not wrap.

Use the banner variant when an entire workflow, object, or page is impacted by an external event or condition that the user should be aware of.

Banner variant spans the full width of the parent container and has a grey bottom border.

Banner variants with longer messages should use the default inline layout.

#

#

  • Bring user's attention to issues, which may need to be resolved by them.
  • Announce new or unused feature.
  • When entire form couldn't be successfully submitted and there isn't a specific field that caused the failure.
  • Banner specific: When an entire workflow, object, or page is impacted by an external event or condition that the user should be aware of.

#

  • If you are immediately confirming a user's action while they remain in the same view, use a toast instead.

#

  • Use sentence case everywhere.
  • Keep title to a few words.
  • Don't add a dot at the end to title and action text.
  • Always end a message with a dot.

#

Inherits margin props.

NameDefaultDescription

On this page

  • Usage
  • Info
  • Subtle
  • Error
  • Warning
  • Balancing
  • Success
  • Upsell
  • Dismissible
  • Context message
  • Actionable
  • Centered
  • Banner
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props