alert — inline notifications & toasts
Two render modes from one component:
- Inline alert — Latte include rendered into the page flow (form
feedback, banner, validation summary)
- Toast notification —
toast({ variant, message })JS call,
auto-dismisses after a timeout, stacked in a fixed container
Four variants (info, success, warning, error) cover almost every feedback scenario. Optional title for emphasis, optional dismiss button.
Install
npx czg-ui add alert@import 'components/alert'; to app.scss, import { toast } from './components/alert'; to app.js.
Requires base.
Parameters (inline mode)
| Param | Type | Default | Notes | |||
|---|---|---|---|---|---|---|
variant | string | 'info' | info \ | success \ | warning \ | error |
title | string\ | null | null | Optional bold title | ||
message | string | — | Body content (HTML allowed) | |||
dismissible | bool | true | Show the × close button |
Inline usage
{include /app/components/Alert/alert.latte,
variant => 'success',
message => 'Nastavení uloženo.'}
{include /app/components/Alert/alert.latte,
variant => 'error',
title => 'Chyba',
message => 'Něco se pokazilo.',
dismissible => false}Toast usage
import { toast } from './components/alert';
toast({ variant: 'success', message: 'OK!' });
toast({ variant: 'error', title: 'Chyba', message: '...', timeout: 8000 });The toast container is created automatically on first call. Timeouts default to 5s; pass timeout: 0 to disable auto-dismiss.
When NOT to use
- Critical errors that block work — use a modal, not a toast
- More than 3 active toasts — user can't read the stack; coalesce or
switch to a dedicated notification center