Fylgja Toast

A toast is a short notification message, such as a save confirmation or an error. It is a <div class="toast">, with data-type variants for info, warning, and error. The component styles the message; showing and dismissing it is your app’s job.

Preview

Your changes have been saved.
A new version is available.
Your session expires soon.
Something went wrong. Try again. 
<div class="flow">
	<div class="toast">Your changes have been saved.</div>
	<div class="toast" data-type="info">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
		A new version is available.
	</div>
	<div class="toast" data-type="warning">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
		Your session expires soon.
	</div>
	<div class="toast" data-type="error">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
		Something went wrong. Try again.
	</div>
</div>

Usage

  • Use a <div class="toast"> for a neutral message.
  • Add data-type="info", "warning", or "error" for an accented variant, and pair it with a matching icon marked aria-hidden="true".
  • Position and animate toasts with utilities and your own show/dismiss logic; the component does not place or time them.

Accessibility

  • Render toasts inside a live region so screen readers announce them: role="status" (with aria-live="polite") for routine messages, or role="alert" for errors.
  • Do not convey meaning by color alone; keep the message text clear, and back the data-type accent with an icon or wording.

FAQ

How do I color a toast for info, warning, or error?

Add data-type="info", "warning", or "error" to the toast. Each sets an accent color; pair it with a matching icon.

How do toasts appear and dismiss?

That is up to your app. The component only styles the message; show it in a live region, position it with utilities, and remove it (or auto-dismiss it) with your own script.