Skip to contentEnma

Toast

Live demo

The card was declined. Try another.

How to use it

A short confirmation or error that appears after an action, with an optional single action.

Provide title, optionally description, tone (neutral, positive, negative) and action (label, onClick).
Positioning and timing are the app's job: bottom center on mobile, bottom right on desktop, about 4 seconds, longer if it has an action.
Write the outcome, not the mechanism: "Invoice sent", never "Successfully sent!".

Don't: stack more than two, or put critical errors only in a toast.

In every theme

Follows the mode picked in the header.

Graphite

Invoice sent

Northwind will get it in a minute.

Glass

Invoice sent

Northwind will get it in a minute.

Paper

Invoice sent

Northwind will get it in a minute.

Mineral

Invoice sent

Northwind will get it in a minute.

Enamel

Invoice sent

Northwind will get it in a minute.

Ember

Invoice sent

Northwind will get it in a minute.

Code

React

import { Toast } from 'enma/react';

<Toast tone="positive" title="Invoice sent" description="Northwind will get it in a minute." action={{ label: 'Undo', onClick: undo }} />
<Toast tone="negative" title="The card was declined. Try another." />

Plain HTML

<div class="e-toast e-sq e-toast--positive" role="status">
  <span class="e-toast__icon" aria-hidden="true"><!-- check icon --></span>
  <div class="e-toast__body"><div class="e-toast__title">Invoice sent</div></div>
</div>

Props

`ToastProps`

Props of ToastProps
Prop	Type	Default	Description
`title` required	React.ReactNode
`description`	React.ReactNode
`tone`	'neutral' \| 'positive' \| 'negative'	'neutral'
`icon`	IconName
`action`	{ label: string; onClick?: () => void }
`className`	string
`style`	React.CSSProperties