Toast Message

Usage Guidelines:

• Do Use for confirmation of low-risk actions.

• Do Not Use for critical errors that require a specific user decision (use a Dialog instead).

• Do Not Use for lengthy content; keep the message concise (Heading + 1 line of context).

Anatomy & Properties:

The Toast is a rich container capable of handling more than just text.

• Content: Supports a Heading (Strong) and an optional Sub-heading (Regular) for additional context.

• Iconography: A leading semantic icon (Check, Alert, Info) provides immediate visual recognition of the message type.

• Call to Action (CTA): Supports an optional embedded button (e.g., "View Memo") for quick navigation to the relevant object.

Semantic Variants:

The component supports four distinct types to communicate system state:

• Success (Green): Positive confirmation.

  • Icon: Check Circle.

  • Usage: "Deal Created," "File Uploaded."

• Warning (Orange): Non-blocking alerts.

  • Icon: Alert Circle.

  • Usage: "Connection Unstable," "License Expiring Soon."

• Error (Red): System failures that do not block the current view.

  • Icon: Error Circle.

  • Usage: "Upload Failed," "Could not save changes."

• Info (Blue): Neutral system updates.

  • Icon: Info Circle.

  • Usage: "New features available," "Export started."

Behavior: The "Smart Dismiss" Logic:

We engineered a specialized interaction pattern to balance "Visibility" with "Control."

1. The Auto-Dismiss Timer

• Visual Indicator: A circular progress stroke located in the top-right corner.

• Logic: The stroke "counts down" visually (reducing from 360° to 0°) over a standard duration (e.g., 5 seconds). Once the circle is empty, the Toast automatically dismisses.

2. The Hover Interaction (Pause & Control)

To prevent users from missing a message while reading it, we implemented an "Intent-Aware" state:

• Trigger: User hovers the cursor over the Toast card.

• Reaction 1 (Pause): The countdown timer pauses immediately. The Toast will not disappear as long as the user is hovering.

• Reaction 2 (Reveal): The Countdown Circle visually transforms into a Close (X) Icon.

• Result: This gives the user explicit control to manually dismiss the message or keep it visible indefinitely for reading.