Alert component - How to use

Basic use

The most basic invocation requires the type argument to be passed, along with the title and/or description content. By default a neutral alert is generated (with a neutral color applied and a specific icon visible).

<Hds::Alert @type="inline" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

If needed, you can pass only title or only description.

<Hds::Alert @type="inline" as |A|>
  <A.Title>Title here</A.Title>
</Hds::Alert>

<Hds::Alert @type="inline" as |A|>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

Type

A different type of alert can be invoked using the type argument.

<Hds::Alert @type="page" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

Color

A different color can be applied to the alert using the color argument. This will also determine the icon default used in the alert (unless overwritten, see below).

<Hds::Alert @type="inline" @color="success" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

Icon

A different icon can be used in the alert using the icon argument.

<Hds::Alert @type="inline" @color="success" @icon="bulb" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

If instead you want to completely hide the icon you have to pass a false value to the icon argument.

<Hds::Alert @type="inline" @color="success" @icon={{false}} as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

Dismiss

In some cases the alert needs to be dismissable. In this case you have to pass a callback function to the onDismiss argument. This will also automatically add a "dismiss/close" button to the alert, that when clicked will execute the callback function.

🚨 Important: the actual implementation of what happens to the alert when the callback function is invoked is left to the developer (this will likely depent on the type of alert, on the context of where it's used, on the specific use case, etc.).

<Hds::Alert @type="inline" @color="warning" @onDismiss={{this.noop}} as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Renders to:

Actions

Actions can optionally be passed to component using one of the suggested Button or Link::Standalone contextual components.