🟢Toast

Overview:

The Toast component is a transient, non-blocking notification used to communicate system feedback such as confirmations, warnings, errors, or informational updates. Toasts appear temporarily and do not interrupt the user’s workflow.

---

Usage Guidelines:

Use Toasts to provide lightweight, contextual feedback after user or system actions.

When to use

• Confirmations (e.g., save success, settings updated)

• Background system messages

• Non-critical warnings or errors

When not to use

• Blocking or critical issues (use Modal or Alert)

• Navigation or persistent messaging

• Complex decisions requiring user focus

Best practices

• Keep content concise and scannable

• Prefer auto-dismiss for non-actionable toasts

• Use actions sparingly and only when relevant

---

Component Properties:

style (enum)

Purpose: Defines the base visual container style. Usage: Select based on emphasis or placement context. Options: grey, cta, alert

---

sub-style (enum)

Purpose: Communicates the semantic meaning of the toast. Usage: Match the variant to the message intent. Options: eclipse, error, info, nebula, success, warning Context: Drives color tokens and default icon mapping.

---

has-icon (boolean)

Purpose: Toggles the leading status icon. Usage:

• true → shows icon associated with sub-style

• false → text-only toast

Context: Icon type is system-controlled unless overridden.

---

has-button (boolean)

Purpose: Controls whether the toast includes controls beyond content. Usage:

• false → no controls

• true → shows either a dismiss control or buttons

Context:

• When is-actionable = false, this renders a dismiss (close) control

• When is-actionable = true, this enables button actions

---

is-actionable (boolean)

Purpose: Determines whether the toast presents actionable buttons. Usage:

• false → toast is informational; only dismiss is available (if has-button = true)

• true → toast displays a button pair (primary + secondary) Context:

• Requires has-button = true

• Buttons should represent optional, reversible, or secondary actions

---

title (string)

Purpose: Short summary of the notification. Usage: Keep concise; typically one line. Context: Optional but recommended for clarity.

---

message (string)

Purpose: Main descriptive text of the toast. Usage: Brief explanation of the event or outcome. Context: Supports text wrapping; avoid long paragraphs.

---

Appearance Modes:

Supports the following variable collections:

theme

• Adapts background, border, and text tokens for light and dark themes

• Ensures consistent contrast across all sub-style variants

status

• Container itself has no hover/active states

• Interactive elements (buttons, dismiss icon) support hover, focus, and active

device

• Responsive width with min/max constraints

• Content and actions wrap appropriately on smaller screens

ℹ️ Toast does not support disabled or selected container states.

---

Nested Components:

• Button: Appears only when is-actionable = true; rendered as a button pair.

• Button Group: Wraps multiple buttons to manage spacing and alignment.

---

♿ Accessibility Considerations:

• Contrast: Meets WCAG AA across all themes and variants

• Keyboard navigation:

  • Focus moves to dismiss or action buttons when present

  • Buttons and close control are fully keyboard accessible

• Screen reader support:

  • Announced via live region (aria-live="polite")

• Semantic tags:

  • Uses status/alert semantics depending on style

---

🧠 Developer Notes:

• Maps to a composable <Toast /> component

• Button logic:

  • has-button + !is-actionable → dismiss only

  • has-button + is-actionable → button pair

• Lifecycle (auto-dismiss, stacking, placement) handled by Toast Provider

---

Known Issues:

No known issues.

---

Reference Links:

• Design spec (Figma): Toast Component

• Storybook / Component library: TBD

• WCAG 2.1 – Status Messages & Notifications