Toast
Alpha 1Kb
js
import 'pyro/toast'
import { showToast } from 'pyro/toast';
Usage
ts
/**
* Shows a toast, recommended use with <pyro-toast> in document
*
* @param message message to show
* @param options.duration duration in ms
* @param options.selector selector of element where to append pyro-toast, if none found, default `body`
*/
declare function showToast(message: string, options?: { duration?: number; selector: string }): void;
Variations
Props
ts
interface ToastProps {
/** Message to display */
message?: string;
/** Duration in ms */
duration?: number;
/** Toast severity, determines colors */
severity?: 'info' | 'success' | 'warning' | 'error' | '';
/** Vertical position on top, default false */
top?: boolean;
/** Vertical position on left, default false */
left?: boolean;
/** Horizontal position in center, default false */
center?: boolean;
}
Slots
No slots.
CSS prop theming
The
Full theming sheet
js
/**
* @prop {--pyro-toast-spacing = --pyro-spacing} - size of toast
* @prop {--pyro-toast-border = --pyro-border} - `border`
* @prop {--pyro-toast-border-radius = --pyro-border-radius} - `border-radius`
* @prop {--pyro-toast-text-color = --pyro-text-color} - text `color`
*
* Severity
* @prop {--pyro-toast-info-color-lighter = --pyro-info-color-lighter} - default `background`
* @prop {--pyro-toast-success-color-lighter = --pyro-success-color-lighter} - `background`
* @prop {--pyro-toast-warning-color-lighter = --pyro-warning-color-lighter} - `background`
* @prop {--pyro-toast-error-color-lighter = --pyro-error-color-lighter} - `background`
* @prop {--pyro-toast-info-color = --pyro-info-color} - default `border-color`
* @prop {--pyro-toast-success-color = --pyro-success-color} - `border-color`
* @prop {--pyro-toast-warning-color = --pyro-warning-color} - `border-color`
* @prop {--pyro-toast-error-color = --pyro-error-color} - `border-color`
*/