Alert

Alerts are contextual pop-up style messages that can contain actions without obstructing the application.

Overview

Alerts are used to communicate to the user in an unobtrusive manner. They are primarily displayed as a response to the user taking action on an element; however they can also be used to communicate non-critical system messages, or to provide updates on actions the user has previously taken.

Try to avoid stacking Alerts. If you find a need to present the user with multiple Alerts at once, or when you want to interrupt the user, please consider using a Dialog.

Refer to the UI state colors if you are unsure of what color Alert to use.

Usage

  • Something important was deleted
  • Confirming an important action
  • An update is available
  • Something was saved
  • Something was downloaded
  • A problem or error occurred

Sample

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element, focus will leave the component.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element, focus will leave the component.

Writing and copy

Alerts are meant to quickly convey a message to the user. Consistent Alert structure, verbiage, and copy ensures that the user will have an expected experience across the platform. Keep copy short and to the point.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.