Toasts

Default

Use .toast for a notification.

<div class="toast">Default toast</div>

Insert dynamic toasts into a persistent polite live region.

<div role="status" aria-live="polite" aria-atomic="false">
	<!-- Insert new toast elements here. -->
</div>

Background colors

Combine .toast with a background utility.

<div class="toast bg-primary">toast primary</div>
<div class="toast bg-secondary">toast secondary</div>
<div class="toast bg-success">toast success</div>
<div class="toast bg-warning">toast warning</div>
<div class="toast bg-error">toast error</div>
<div class="toast bg-inverse">toast inverse</div>

With content

Use .toast-content, .toast-title and .toast-message for structure.

<div class="toast bg-surface">
	<div class="toast-content">
		<p class="toast-title">Update available</p>
		<p class="toast-message">A new version is ready to install.</p>
	</div>
</div>

Closable

Use .toast-close for the close action.

<div class="toast bg-error">
	<div class="toast-content">
		<p class="toast-title">Error</p>
		<p class="toast-message">Something went wrong.</p>
	</div>

	<button class="toast-close icon-btn icon-btn-text" type="button" aria-label="Close toast">
		×
	</button>
</div>

CSS Variables

Override these variables on the component or an ancestor.

--toast-z-index: var(--z-index-toast);
--toast-padding-y: var(--spacer-2);
--toast-padding-x: var(--spacer-3);
--toast-bg-color: var(--bg-surface);
--toast-color: var(--text-color);
--toast-border-width: var(--border-width);
--toast-border-color: transparent;
--toast-border-radius: var(--border-radius);
--toast-box-shadow: var(--shadow);
--toast-gap: var(--spacer-2);