Fylgja Toast
The Fylgja Toast component allows you to display brief, transient messages and notifications across your UI.
This component is ideal for building UI elements such as toasts, banners, alerts, or short inline messages that provide quick feedback (confirmations, warnings, or errors).
Installation
npm install @fylgja/toastpnpm add @fylgja/toast<link href="https://cdn.jsdelivr.net/npm/@fylgja/toast/index.min.css" rel="stylesheet">Usage
Once installed, you can import the full package with:
@import "@fylgja/toast";Alternatively, if you only need specific parts, you can import them individually:
| Import Path | Description |
|---|---|
@fylgja/toast/base | Contains to core of the Toast |
@fylgja/toast/styles | Contains styles for each toast status, for example warning and error |
Styles
By default, a toast appears as a lightweight floating panel. Use icons, a close action, or inline controls to provide richer interactions when needed.
The styles package makes visual customization straightforward.
A single CSS variable --toast-style controls background, border, and text colors.
Built on CSS Relative Colors, the system derives accessible color variations automatically, so you get consistent, readable results with minimal effort.
Three preset style tokens are provided: info (which uses the brand color),
warning, and error. You can extend or override these tokens to match your design system.
Examples
These examples demonstrate how you can use the Toast component with various styles and content options.
<section class="toast" aria-label="...">...</section><section class="toast" data-type="info" aria-label="...">...</section><section class="toast" data-type="warning" aria-label="...">...</section><section class="toast" data-type="error" aria-label="...">...</section><section class="toast" style="--toast-style: #008001" aria-label="...">...</section>FAQ
Does the Toast component auto-dismiss after a few seconds?
No, there's no built-in JS timer. The component is CSS-only; showing, hiding, and auto-dismiss timing are left up to you, e.g. by toggling the hidden attribute as shown in the "Message with Action" example.
How do I change a toast's color without using data-type?
Set the --toast-style CSS variable directly to any color, as shown in the "Custom Style Message" example. Background, border, and text colors are then derived automatically using CSS Relative Colors.
What's the difference between data-type="info" and setting --toast-style manually?
data-type="info", "warning", and "error" are preset style tokens that set --toast-style for you. Setting --toast-style directly lets you use any custom color instead of the three presets.
Do I need @fylgja/toast/styles to use data-type?
Yes, the base package only gives you the toast container styling. The styles import adds the info/warning/error preset tokens that data-type relies on.