Toast

BETA

Component demo

Interactive example

Web component

React

<ic-buttononclick="displayToast()">Display toast</ic-button>
<ic-toast-region>
<ic-toastid="toast-01"heading="Your coffee is ready"></ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>Display toast component</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToastheading='Your coffee is ready'ref={toastEl}/>
</IcToastRegion>

Toast region details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property openToast Attribute	The toast element to be displayed. type: HTMLIcToastElement

Property

openToast

Attribute

The toast element to be displayed.

type: HTMLIcToastElement

Toast details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property heading Attribute heading	The title to display at the start of the toast. (NOTE: Should be no more than`70` characters) Required type: string
Property autoDismissTimeout Attribute auto-dismiss-timeout	If toast dismissMode is set to`automatic` , use this prop to define the time before the toast dismisses (in MILLISECONDS) (NOTE: Has a minimum value of`5000ms` ) type: number	5000
Property dismissButtonAriaLabel Attribute dismiss-button-aria-label	If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component type: string	"dismiss"
Property dismissMode Attribute dismiss-mode	How the toast will be dismissed. If manual will display a dismiss button. type: IcActivationTypes - "automatic" \| "manual"	"manual"
Property message Attribute message	The main body message of the toast. (NOTE: Should be no more than`140` characters) type: string
Property neutralIconAriaLabel Attribute neutral-icon-aria-label	Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon type: string
Property variant Attribute variant	The variant of the toast being rendered type: IcStatusVariants - "error" \| "info" \| "neutral" \| "success" \| "warning"

Property

heading

Attribute

heading

The title to display at the start of the toast. (NOTE: Should be no more than70 characters)

Required

type: string

Property

autoDismissTimeout

Attribute

auto-dismiss-timeout

If toast dismissMode is set toautomatic , use this prop to define the time before the toast dismisses (in MILLISECONDS) (NOTE: Has a minimum value of5000ms )

type: number

Default: 5000

Property

dismissButtonAriaLabel

Attribute

dismiss-button-aria-label

If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component

type: string

Default: "dismiss"

Property

dismissMode

Attribute

dismiss-mode

How the toast will be dismissed. If manual will display a dismiss button.

type: IcActivationTypes - "automatic" | "manual"

Default: "manual"

Property

message

Attribute

message

The main body message of the toast. (NOTE: Should be no more than140 characters)

type: string

Property

neutralIconAriaLabel

Attribute

neutral-icon-aria-label

Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon

type: string

Property

variant

Attribute

variant

The variant of the toast being rendered

type: IcStatusVariants - "error" | "info" | "neutral" | "success" | "warning"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot action	IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.
Slot neutral-icon	A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.

CSS Custom Properties

Name	Description
--ic-z-index-toast	z-index of toast

--ic-z-index-toast z-index of toast

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name	Description	Signature
Web component icDismiss React onIcDismiss	Is emitted when the user dismisses the toast	void

Web component

icDismiss

React

onIcDismiss

Is emitted when the user dismisses the toast

void

Variants

Displaying toasts

Use theopenToast prop on the toast region component to display a toast message.

Queuing toasts

To view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.

Interactive example

Web component

React

<ic-buttononclick="handleClick()">Display default toast</ic-button>
<ic-buttononclick="handleErrorClick()">Display error toast</ic-button>
<ic-buttononclick="handleAutoDismissClick()">Display auto dismiss toast</ic-button>
<ic-toast-region>
<ic-toastid="toast-01"heading="Your coffee is ready"></ic-toast>
<ic-toastid="toast-02"heading="There is no coffee left"variant="error"></ic-toast>
<ic-toastid="toast-03"heading="Your coffee is ready"dismiss-mode="automatic"auto-dismiss-timeout="10000"></ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>Display default toast</IcButton>
<IcButtononClick={handleErrorClick}>Display error toast</IcButton>
<IcButtononClick={handleAutoDismissClick}>
  Display auto dismiss toast
</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToastheading="Your coffee is ready"ref={toastEl}/>
<IcToast
heading="There is no coffee left"
variant="error"
ref={errorToastEl}
/>
<IcToast
heading="Your coffee is ready"
dismissMode="automatic"
autoDismissTimeout={10000}
ref={autoDismissToastEl}
/>
</IcToastRegion>

Status variant

Interactive example

Web component

React

<ic-buttononclick="displayToast()">Display success toast</ic-button>
<ic-toast-region>
<ic-toastvariant="success"id="toast-02"heading="Your coffee is ready"message="Please dismiss and collect"></ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>Display success toast</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading='Your coffee is ready'
ref={toastEl}
message='Please dismiss and collect'
variant='success'
/>
</IcToastRegion>

Multi-line

Interactive example

Web component

React

<ic-buttononclick="displayToast()">Display multi-line toast</ic-button>
<ic-toast-region>
<ic-toastid="toast-03"heading="Your coffee is ready"message="Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold."></ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>Display multi-line toast</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading='Your coffee is ready'
ref={toastEl}
message='Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.'
/>
</IcToastRegion>

Slotted 'action' toast

Interactive example

Web component

React

<ic-buttononclick="displayButtonToast()">Display slotted buttons toast</ic-button>
<ic-buttononclick="displayLinkToast()">Display slotted buttons toast</ic-button>
<ic-toast-region>
<ic-toastid="toast-04"heading="Your order could not be placed"message="Please try again"variant='warning'>
<ic-buttonslot='action'appearance='light'>Retry</ic-button>
</ic-toast>
<ic-toastid="toast-05"heading="Your order could not be placed"message="Please try again"variant='warning'>
<ic-linkslot='action'theme='dark'>Retry</ic-link>
</ic-toast>
</ic-toast-region>

<IcButtononClick={handleButtonToastClick}>Display slotted button toast</IcButton>
<IcButtononClick={handleLinkToastClick}>Display slotted link toast</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading='Your order could not be placed'
ref={buttonToastEl}
message='Please try again'
variant='warning'
>
<IcButtonslot='action'appearance='light'>Retry</IcButton>
</IcToast>
<IcToast
heading='Your order could not be placed'
ref={linkToastEl}
message='Please try again'
variant='warning'
>
<IcLinkhref="#"slot="action"theme="dark">Retry</IcLink>
</IcToast>
</IcToastRegion>

Auto-dismiss

Interactive example

Web component

React

<ic-buttononclick="displayToast()">Display auto-dismiss toast</ic-button>
<ic-toast-region>
<ic-toast
id="toast-06"
heading="Your coffee is ready"
dismiss-mode="automatic"
auto-dismiss-timeout="10000"
variant="info"
></ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>Display auto-dismiss toast</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading="Your coffee is ready"
ref={toastEl}
dismissMode="automatic"
autoDismissTimeout={10000}
variant="info"
/>
</IcToastRegion>

Custom neutral icon and aria-labels

Interactive example

Web component

React

<ic-buttononclick="displayToast()">Display auto-dismiss toast</ic-button>
<ic-toast-region>
<ic-toast
id="toast-07"
heading="Your coffee is ready"
variant="neutral"
neutral-icon-aria-label="It is time to collect your coffee"
dismiss-button-aria-label="Dismiss me"
>
<svg
xmlns="http://www.w3.org/2000/svg"
slot="neutral-icon"
viewBox="0 0 24 24"
>
<title>coffee-outline</title>
<path
d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"
/>
</svg>
</ic-toast>
</ic-toast-region>

<IcButtononClick={handleClick}>
  Display custom icon and aria-label toast
</IcButton>
<IcToastRegionref={toastRegionEl}>
<IcToast
heading="Your coffee is ready"
ref={toastEl}
variant="neutral"
neutralIconAriaLabel="It is time to collect your coffee"
dismissButtonAriaLabel="Dismiss me"
>
<SlottedSVGslot="neutral-icon">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</SlottedSVG>
</IcToast>
</IcToastRegion>

Last reviewed 31 May 2024 .