Alert — Cumulus UI

Alert

Preview

Types

This is an informational alert.

Operation completed successfully.

Please review before proceeding.

An error occurred while processing.

With header

This alert has a header for additional context.

Dismissible

This alert can be dismissed.

Usage

<cs-alert type="info">Informational message.</cs-alert>
<cs-alert type="error" header="Error">Something went wrong.</cs-alert>
<cs-alert type="success" dismissible dismiss-aria-label="Close">
  Operation completed.
</cs-alert>

Properties

analytics-metadataAlertProps.AnalyticsMetadata: Specifies additional analytics-related metadata.

errorContext - Identifies the error category and sub-category.
dismiss-aria-labelstring default: '': Adds an aria-label to the dismiss button.
dismissibleboolean default: false: Adds a close button to the alert when set to true. An onDismiss event is fired when a user clicks the button.
i18n-stringsAlertProps.I18nStrings: An object containing all the necessary localized strings required by the component.
status-icon-aria-labelstring default: '': Provides a text alternative for the icon.
typeAlertProps.Type default: 'info': Specifies the type of message you want to display.
visibleboolean default: true: Determines whether the alert is displayed.

Slots

action: Specifies an action for the alert message. Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.
buttonText: Displays an action button next to the message area when set. An onButtonClick event is fired when the user clicks it.
default: Primary text displayed in the element.
header: Heading text.

Events

buttonClickCustomEvent<void>: Fired when the user clicks the action button. Deprecated Replaced by action.
dismissCustomEvent<void>: Fired when the user clicks the close icon that is displayed when the dismissible property is set to true.