Toast Message

<tpg-toast-message></tpg-toast-message>

Note

Toast Message is best to be used with the service class ToastService to handle showing, hiding, limiting visible toasts and more. Take a look ToastService documentation for how to implement it.

Examples

Properties

Is Open

Use the is-open prop that defines if the toast is visible or not.

Duration

Use the duration prop that defines how long the toast should be visible. Default is infinity.

Message

This is the simplest version of the tpg-toast-message with only the message prop defined.

Component

Vanilla JS

      <tpg-toast-message
        message="Placeholder text"
        is-open
      ></tpg-toast-message>

React

      <tpg-toast-message
        message="Placeholder text"
        isOpen
      ></tpg-toast-message>

Icon Template

Use the icon-template prop to show an icon before the message.

Component

Vanilla JS

      <tpg-toast-message
          icon-template={tpgIconPlaceholderCustom}
          message="Placeholder text"
          is-open
      >
      </tpg-toast-message>

React

      <tpg-toast-message
          iconTemplate={tpgIconPlaceholderCustom}
          message="Placeholder text"
          isOpen
      >
      </tpg-toast-message>

Alignment

Use the alignment prop to choose between vertical and horizontal alignemnt of the content. Horizontal is default.

Component

Vanilla JS

      <tpg-toast-message
        alignment="horizontal"
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>
      <tpg-toast-message
        alignment="vertical"
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>

React

      <tpg-toast-message
        alignment="horizontal"
        iconTemplate={tpgIconPlaceholderCustom}
        message="Placeholder text"
        isOpen
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>
      <tpg-toast-message
        alignment="vertical"
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>

Slots

We are using a pattern of named slots to give you the consumer more power and flexibility. When taking advantage of the named slots its important to follow the projects design guidelines.

Leading Badge

Use the leading-badge slot to display a trailing small badge with no background.

Component

Vanilla JS

      <tpg-toast-message
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>

React

      <tpg-toast-message
        iconTemplate={tpgIconPlaceholderCustom}
        message="Placeholder text"
        isOpen
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="leading-badge"
        ></tpg-badge>
      </tpg-toast-message>

Trailing Badge

Use the trailing-badge slot to display a trailing small badge with no background.

Component

Vanilla JS

      <tpg-toast-message
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-toast-message>

React

      <tpg-toast-message
        iconTemplate={tpgIconPlaceholderCustom}
        message="Placeholder text"
        isOpen
      >
        <tpg-badge
          label="2/10"
          emphasis="no-background"
          slot="trailing-badge"
        ></tpg-badge>
      </tpg-toast-message>

Tertiary Button First

Use the tertiary-button-first slot to render a trailing tertiary action button.

Component

Vanilla JS

      <tpg-toast-message
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-tertiary-button
          slot="tertiary-button-first"
          label="Go to text"
        />
      </tpg-toast-message>

React

      <tpg-toast-message
        iconTemplate={tpgIconPlaceholderCustom}
        message="Placeholder text"
        isOpen
      >
        <tpg-tertiary-button
          slot="tertiary-button-first"
          label="Go to text"
        />
      </tpg-toast-message>

Tertiary Button Second

Use the tertiary-button-second slot to render a second trailing tertiary action button.

Component

Vanilla JS

      <tpg-toast-message
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-tertiary-button
          slot="tertiary-button-first"
          label="Ok"
        />
        <tpg-tertiary-button
          slot="tertiary-button-second"
          label="Close"
        />
      </tpg-toast-message>

React

      <tpg-toast-message
        icon-template={tpgIconPlaceholderCustom}
        message="Placeholder text"
        is-open
      >
        <tpg-tertiary-button
          slot="tertiary-button-first"
          label="Ok"
        />
        <tpg-tertiary-button
          slot="tertiary-button-second"
          label="Close"
        />
      </tpg-toast-message>

Triggering the toast

it is best to use the ToastManager to handle the triggering. Read its documentation here

The toast can be triggered by adding it to the DOM, and calling toast() on it. Note that after hide() is called (which happens automatically if you set a millisecond value for the duration attribute) the toast element is stripped from the DOM automatically. If you want to keep it around you will have to reinsert it. See the vanilla example for how to accomplish this.

However, it is worth noting that you should normally not have to do this, simply creating and discarding a toast element in each instance it is needed should work well enough in most cases. See the React example for how to do this.

Component

Tables

Properties

Attribute	Property	Description	Type	Default Value
message	message	Text to be displayed in the toast, the main message.	string	''
icon-template	iconTemplate	Icon to be displayed before the main message.	IconConstant | ''	''
alignment	alignment	Text to be displayed in the toast, the main message.	'horizontal' | 'vertical'	'horizontal'
is-open	isOpen	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	boolean	false
duration	duration	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `-1`, meaning the alert will not close on its own.	number	-1
position	position		string	''
is-queued	isQueued		boolean	false
_has-updated	_hasUpdated		boolean	false

Events

Event name	Reactjs attribute	Description
tpg-show	ontpg-show	The Toast emits the custom tpg-show event when starting the opening sequence.
tpg-after-show	ontpg-after-show	The Toast emits the custom tpg-after-show event after being opened and done rendering in the view.
tpg-hide	ontpg-hide	The Toast emits the custom tpg-hide event when starting the closing sequence.
tpg-after-hide	ontpg-after-hide	The Toast emits the custom tpg-after-hide event when done closing and removing the Toast from DOM.

Functions

Name	Description	Arguments
pauseAutoHide		No parameters
resumeAutoHide		No parameters

Slots

Name	Description
tertiary-button-first	slot reserved for the primary action tertiary button
tertiary-button-second	slot reserved for the secondary action tertiary button
leading-badge	slot reserved for badge component at the beginning of the toast
trailing-badge	slot reserved for badge component at the end of the toast
	This is where the content of the toast will be displayed

CSS Parts

Attribute	Description
content	part for adding styling to the default slot

Sandbox