hb-toast — toast

Category: overlays
Tags: overlays, notifications

What it does

Bulma-styled notification toast: show (yes / no), title, content, optional img, small, level, position, timeout, string progress for a progress bar, and buttons for actions. Slots customize header and body; dispatches visibility and button action events. Theme uses Bulma variables on :host.

Custom element

hb-toast

Attributes (snake_case; use string values in HTML)

• id (optional), style (optional): strings.
• show (required): "yes" | "no".
• title (required), content (required), img (required per typings): strings (img may be URL or data URI).
• small (optional): string (e.g. timestamp line).
• level (optional): "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark".
• position (optional): "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right".
• timeout (optional): number or string — auto-hide ms.
• progress (optional): string — progress bar value/label semantics per Storybook.
• buttons (optional): JSON string — TToastButton[] (type confirm/cancel, optional action, text, icon, colors).

Events

• changeVisibility: { id: string; show: boolean; disappear?: boolean }.
• action: { id: string; action?: string }.

Usage notes

• Slots: header_icon (top-left badge), header_strong, header_small (overrides the status chip under the title), body.
• CSS parts: toast (root), status (chip row for time / percentage / timeout).
• Theming: Bulma Sass is forwarded from styles/bulma.scss; override --bulma-* on the host or document root as needed. The level attribute maps to Bulma notification tints (is-* + is-light, except light which uses the palette’s light variant).

Minimal HTML example

<hb-toast
  show="yes"
  title="Notice"
  content="Hello, world!"
  img="https://via.placeholder.com/64"
  level="primary"
></hb-toast>