Toast component - How to use

Basic use

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

<Hds::Toast @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Title>Title here</T.Title>
  <T.Description>Description here</T.Description>
</Hds::Toast>

Renders to:

🚨 Important: the actual implementation of what happens to the alert when the onDismiss function is invoked is left to the developer.

If needed, you can pass only title or only text as argument.

<Hds::Toast @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Title>Title here</T.Title>
</Hds::Toast>

<Hds::Toast @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Description>Description here</T.Description>
</Hds::Toast>

Renders to:

Color

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

<Hds::Toast @color="success" @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Title>Title here</T.Title>
  <T.Description>Description here</T.Description>
</Hds::Toast>

Renders to:

Icon

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

<Hds::Toast @color="success" @icon="bulb" @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Title>Title here</T.Title>
  <T.Description>Description here</T.Description>
</Hds::Toast>

Renders to:

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

<Hds::Toast @color="success" @icon={{false}} @onDismiss={{this.yourOnDismissFunction}} as |T|>
  <T.Title>Title here</T.Title>
  <T.Description>Description here</T.Description>
</Hds::Toast>

Renders to:

Actions

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