Toast - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Display toast component

Web component

React

Show full code

<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	The toast element to be displayed. type: HTMLIcToastElement - HTMLIcToastElement \| undefined

Property

openToast

The toast element to be displayed.

type: HTMLIcToastElement - HTMLIcToastElement | undefined

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 \| undefined	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 \| undefined	"dismiss"
Property dismissMode Attribute dismiss-mode	How the toast will be dismissed. If manual will display a dismiss button. type: IcActivationTypes - "automatic" \| "manual" \| undefined	"manual"
Property message Attribute message	The main body message of the toast. (NOTE: Should be no more than`140` characters) type: string - string \| undefined
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 - string \| undefined
Property variant Attribute variant	The variant of the toast being rendered type: IcStatusVariants - "error" \| "info" \| "neutral" \| "success" \| "warning" \| undefined

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 | undefined

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 | undefined

Default: "dismiss"

Property

dismissMode

Attribute

dismiss-mode

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

type: IcActivationTypes - "automatic" | "manual" | undefined

Default: "manual"

Property

message

Attribute

message

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

type: string - string | undefined

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 - string | undefined

Property

variant

Attribute

variant

The variant of the toast being rendered

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

Display default toast

Display error toast

Display auto dismiss toast

Web component

React

Show full code

<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

Display success toast

Web component

React

Show full code

<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

Display multi-line toast

Web component

React

Show full code

<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

Display slotted button toast

Display slotted link toast

Web component

React

Show full code

<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

Display auto-dismiss toast

Web component

React

Show full code

<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

Display custom icon and aria-labels toast

Web component

React

Show full code

<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>

Toast usage without useRef

Interactive example

Display toast

React

Show full code


<IcToastRegion>
<IcToast
heading="Your coffee is ready"
/>
</IcToastRegion>

Last reviewed 31 May 2024 .