Skip to content

Toast

Alpha 1Kb
js
import 'pyro/toast'
import { showToast } from 'pyro/toast';
Preview Code Stackblitz

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`
 */