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

7 samples
1
2
3
4
5
<calcite-alert icon="rangefinder" kind="brand" open label="A report alert">
    <div slot="title">Trail Camera Report </div>
    <div slot="message">We thought you might want to take a look</div>
    <calcite-link slot="link">Take action</calcite-link>
</calcite-alert>
v3.0.3

Best Practices

While visually similar to Notice, Alert has distinct capabilities and intended use cases. It is positioned absolutely over content and may be constrained to the bounds of a parent when slotted.

Comparison

AlertThis component
Best for ephemeral, workflow specific messaging.
Generally should not be open at page load.
Most often displayed as a result of user interaction.
NoticeAlternative
Best for informative, contextually relevant information.
Can be open at page load, or displayed as a result of user action.
Can be persisted in the interface or made closable.
DialogAlternative
Best for long-form messaging, or narrative content that may contain media or interactive elements.
Can at times be open at page load for introductory messaging.
Generally presented as a result of user invocation.

Recommendations

Alerts are used to communicate to the user in a noticeable but non-interruptive 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 provide updates on actions the user has previously taken.

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

PropertyAttributeDescriptionTypeDefault
autoCloseauto-closeWhen true, the component closes automatically. Recommended for passive, non-blocking alerts.booleanfalse
autoCloseDurationauto-close-durationSpecifies the duration before the component automatically closes - only use with autoClose."fast" | "medium" | "slow""medium"
iconiconWhen true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.boolean | string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
kindkindSpecifies the kind of the component, which will apply to top border and icon."brand" | "danger" | "info" | "success" | "warning""brand"
labelrequiredlabelSpecifies an accessible name for the component.string
messageOverridesUse this property to override individual strings used by the component.{ close?: string; }
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
openopenWhen true, displays and positions the component.booleanfalse
placementplacementSpecifies the placement of the component."bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start""bottom"
queuequeueSpecifies the ordering priority of the component when opened."immediate" | "last" | "next""last"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"

Slots

NameDescription
titleA slot for adding a title to the component.
messageA slot for adding main text to the component.
actions-endA slot for adding calcite-actions to the end of the component. It is recommended to use two or fewer actions.

Styles

NameDescription
--calcite-alert-widthSpecifies the width of the component.
--calcite-alert-background-colorSpecifies the component's background color.
--calcite-alert-corner-radiusSpecifies the component's corner radius.
--calcite-alert-shadowSpecifies the component's shadow.
--calcite-alert-offset-sizeSpecifies the component's placement offset.

Events

NameDescriptionBehavior
calciteAlertBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteAlertBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteAlertCloseFires when the component is closed and animation is complete.bubblescomposed
calciteAlertOpenFires when the component is open and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's "close" button, the first focusable item. @returns {Promise}setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close