Preview

Note: The items property must be set via JavaScript as it accepts an array of objects.

Usage

<cs-flashbar id="my-flashbar"></cs-flashbar>
<script>
  document.getElementById('my-flashbar').items = [
    { type: 'success', content: 'Instance created successfully.' },
    { type: 'error', content: 'Failed to delete resource.' },
  ];
</script>

Properties

i18n-stringsFlashbarProps.I18nStrings

An object containing all the necessary localized strings required by the component. The object should contain:

• ariaLabel - Specifies the ARIA label for the list of notifications.

If stackItems is set to true, it should also contain:

• notificationBarAriaLabel - (optional) Specifies the ARIA label for the notification bar
• notificationBarText - (optional) Specifies the text shown in the notification bar
• errorIconAriaLabel - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type error.
• warningIconAriaLabel - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type warning.
• infoIconAriaLabel - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type info.
• successIconAriaLabel - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type success.
• inProgressIconAriaLabel - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type in-progress or with loading set to true.

itemsReadonlyArray<FlashbarProps.MessageDefinition>required

Specifies flash messages that appear in the same order that they are listed. The value is an array of flash message definition objects.

A flash message object contains the following properties:

• header (unknown) - Specifies the heading text.
• content (unknown) - Specifies the primary text displayed in the flash element.
• type (string) - Indicates the type of the message to be displayed. Allowed values are as follows: success, error, warning, info, in-progress. The default is info.
• loading (boolean) - Replaces the status icon with a spinner and forces the type to info.
• dismissible (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included. When a user clicks on this button the onDismiss handler is called.
• dismissLabel (string) - Specifies an aria-label for to the dismiss icon button for improved accessibility.
• statusIconAriaLabel (string) - Specifies an aria-label for to the status icon for improved accessibility. If not provided, i18nStrings.{type}IconAriaLabel will be used as a fallback.
• ariaRole (string) - For flash messages added after page load, specifies how this message is communicated to assistive technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the user's attention.
• action (unknown) - Specifies an action for the flash message. Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.
• buttonText (string) - Specifies that an action button should be displayed, with the specified text. When a user clicks on this button the onButtonClick handler is called. If the action property is set, this property is ignored. Deprecated, replaced by action.
• onButtonClick (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button using the action property. Deprecated, replaced by action.
• onDismiss (event => void) - (Optional) Called when a user clicks on the dismiss button.
• id (string) - Specifies a unique flash message identifier. This property is used in two ways:
  1. As a keys source for React rendering.
  2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
• persistenceConfig (FlashbarProps.PersistenceConfig) - Config to persist dismiss state for dismissable Flashbar item, used only in AWS Consoles.
  • uniqueKey (string) - This key to store the persistence state, it must be unique across your console.
  • crossServicePersistence (boolean) - If true, the persistence state will be shared across AWS services.
• analyticsMetadata (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.
  • suppressFlowMetricEvents - Prevent this item from generating events related to flow metrics.

stack-itemsboolean

Specifies whether flash messages should be stacked.