tuix-toast

The toast is visible whenever type is anything but none, and it resets itself to none after visibility-duration milliseconds.

The toast positions itself at the bottom of the viewport, not inside its container, so the demos below appear over the page, sliding up from the bottom edge.

success

error

warning

text

Invoice sent to [email protected]

Loading the components…

<tuix-toast type="success">Invoice sent</tuix-toast>

const toast = document.querySelector('tuix-toast')
 
toast.type = ToastType.SUCCESS // shows it
toast.addEventListener('on-close', () => console.log('hidden again'))

Types

Value	Attribute	Icon	Background	Background with `dark`
`ToastType.NONE`	`none`	none	Hidden	Hidden
`ToastType.TEXT`	`text`	none	White	`TOAST_TEXT`
`ToastType.WARNING`	`warning`	`triangle-exclamation`	`VALIDATION_50`	`TOAST_WARNING`
`ToastType.ERROR`	`error`	`circle-exclamation`	`ERROR_50`	`TOAST_ERROR`
`ToastType.SUCCESS`	`success`	`circle-check`	`SUCCESS_50`	`TOAST_SUCCESS`

position: fixed, centred at the bottom of the viewport, sliding up from off-screen over 600ms and back down when it hides. It is 640px wide, 520px below the tablet breakpoint and 90% of the viewport (up to 343px) below the mobile one, at z-index: 99. The element can sit anywhere in the document; it does not flow with its container.

API

Properties

Property	Attribute	Type	Default	Description
`type`	`type`	`ToastType`	`none`	The state, and whether the toast is shown at all
`visibilityDuration`	`visibility-duration`	`number`	`4000`	Milliseconds before it hides. `0` keeps it open forever
`dark`	`dark`	`boolean`	`false`	Dark palette

Events

Event	Detail	When
`on-close`	None	The toast hid itself after `visibilityDuration`. Not fired when the duration is `0`

Slots

Slot	Content
default	The message. It is wrapped in a `tuix-text`, so plain text is enough

Notes

Setting type back to the same value does not re-show a toast that already timed out; it goes to none first, then to the type again. That is what the demo above does before each toast.
The colours of the last real type are kept while type is none, so the toast still looks right on the way out.