Alert component - Component API

Here is the API for the component:

type enum required

Sets the type of alert.

Acceptable values:

  1. page
  2. inline
  3. compact
color enum

Sets the color scheme for background, border, title, and description, which cannot be overridden. color results in a default icon, which can be overridden.

Acceptable values:

  1. neutral
  2. highlight
  3. success
  4. warning
  5. critical
icon string | false

Override the default icon name, which is determined by the color argument.

Acceptable values: any Flight icon name or pass false for no icon.

onDismiss function

The alert can be dismissed by the user. When a function is passed, the "dismiss" button is displayed.

...attributes

...attributes spreading is supported on this component.

Contextual components

Title, description, actions and generic content are passed into the alert as yielded components, using the Title, Description, Button, Link::Standalone, Generic keys.

<[A].Title> yielded component

It is a container that yields its content inside the "title" block (the content inherits its style). It accepts ...attributes spreading.

<[A].Description> yielded component

It is a container that yields its content inside the "description" block (the content inherits its style). It accepts ...attributes spreading.

It can be used to pass content more complex than a simple string (eg. logic/conditionals, HTML elements, other Ember components, etc.) inside the "description" block.

Notice: for a few simple HTML elements (like strong, em, a, code/pre) we apply styling. If you use other elements you will need to take care of styling them accordingly.

<[A].Button> yielded component

It is a yielded HDS::Button component, so it exposes exactly the same API of the Button component, apart from the @size argument that is pre-defined to be small, and the @color argument that accepts only secondary or tertiary.

<[A].Link::Standalone> yielded component

It is a yielded HDS::Link::Standalone component, so it exposes exactly the same API of the Link::Standalone component, apart from the @size argument that is pre-defined to be small.

<[A].Generic> yielded component

It is a very simple component that yields its content.

Notice: generic the content will appear at the bottom, after title, description and actions, and the developer will need to take care of spacing, layout and styling of the custom content in this case.

🚨 Important: this method should be used only in special cases and as an escape hatch. If you find yourself in need to use it, we suggest to speak with the design system team to check that the solution is conformant and satifies the accessibility criteria.

For more details about how to invoke these contextual components see the sections "How to use > Description", "How to use > Actions" and "How to use > Generic content" below.