Fylgja Toast

A toast is a short notification message that confirms what the user just did, such as saving a form or adding an item to the cart. 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.
Your order has been placed. 
<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" style="--toast-style: oklch(58% 0.21 var(--hue-green))">
		<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="m9 12 2 2 4-4"/></svg>
		Your order has been placed.
	</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".
  • For a success toast, set --toast-style to a green. The example builds it from the green hue token with --toast-style: oklch(58% 0.21 var(--hue-green)).
  • 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" for routine messages. For errors, use an Alert with role="alert" instead.
  • Do not convey meaning by color alone; keep the message text clear, and back the data-type accent with an icon or wording.

Variants

Sticky message

A toast can stay in view while the user keeps scrolling, such as a cart confirmation at the bottom of a product list. Add the sticky utility, place it at the end of the scrolling content, and pin it to the bottom with --inset-y: auto 0. The role="status" announces it when it appears.

Your picks

  • Linen shirt
  • Wool scarf
  • Canvas tote
  • Leather belt
  • Cotton socks
  • Rain jacket
  • Knit beanie
  • Denim jacket
Rain jacket added to your cart. View cart 
<div class="scroll-y" style="--size-y: 14rem">
	<h3>Your picks</h3>
	<ul>
		<li>Linen shirt</li>
		<li>Wool scarf</li>
		<li>Canvas tote</li>
		<li>Leather belt</li>
		<li>Cotton socks</li>
		<li>Rain jacket</li>
		<li>Knit beanie</li>
		<li>Denim jacket</li>
	</ul>
	<div class="toast sticky" role="status" style="--inset-y: auto 0; --toast-style: oklch(58% 0.21 var(--hue-green))">
		<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="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
		Rain jacket added to your cart.
		<a href="#" class="btn" style="margin-inline-start: auto">View cart</a>
	</div>
</div>

Related: Alert, Callout, Modal.

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 I make a success toast?

There is no success type, but every type only sets --toast-style, and the toast derives its border, background, and text from it. Set --toast-style to a green, such as the green hue token in the success example.

Should I use a toast or an alert for errors?

Use an Alert for errors and other problems that need attention. A toast is better for confirming something the user just did, such as adding an item to the cart.

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.