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
You can install Fylgja Toast via npm or other Node-based package managers like pnpm or bun:
npm install @fylgja/toastAlternatively, you can use it directly via a CDN:
<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>