Alert

Calcite 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 Modal.

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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next item. If the current focus is the last item, the focus will leave the component
Tab and ShiftMove focus to previous item. If the current focus is the first item, the 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

calcite-alert
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Is the alert currently active or not

booleanA boolean property should be present, or not
truefalse
autoDismissauto-dismiss

Close the alert automatically (recommended for passive, non-blocking alerts)

booleanA boolean property should be present, or not
truefalse
autoDismissDurationauto-dismiss-duration

Duration of autoDismiss (only used with `autoDismiss`)

typedChoose from a set of typed values
fastmediumslow
colorcolor

Color for the alert (will apply to top border and icon)

typedChoose from a set of typed values
blue (default)greenredyellow
iconicon

when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon

icon with defaultSet to true to get a recommended default icon. You can also pass a valid calcite ui icon string
true
intlCloseintl-close

string to override English close text

stringA custom string
"Close" (default)
labellabel

Accessible name for the component

required
stringA custom string
undefined
placementplacement

specify the placement of the alert

typedChoose from a set of typed values
bottom (default)bottom-endbottom-starttoptop-endtop-start
scalescale

specify the scale of the alert, defaults to m

typedChoose from a set of typed values
lm (default)s

Events

NameDescriptionDetail
calciteAlertClose

Fired when an alert is closed

bubblescomposedcancelable
any
calciteAlertOpen

Fired when an alert is opened

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
message

Main text of the alert

title

Title of the alert (optional)

Styles

NameDescriptionCSS Variable
--calcite-alert-width

the width of the alert

--calcite-alert-width

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