Toasts

Clicking the example several times will stack the toasts.

Show Toast

Toast UI Components are a type of user interface element designed to convey information in a non-intrusive manner. They are typically used to deliver non-critical updates, confirmations, or acknowledgments to users without interrupting their workflow. Toasts can also provide immediate feedback on user interactions, such as saving changes or completing tasks. This documentation outlines the specifications and guidelines for implementing a Toast UI Component in your web application.

As a designer or developer, consider using the Toast UI Component in the following scenarios:

1. Non-Critical Notifications: Toasts are suitable for conveying non-critical information, such as updates, confirmations, or acknowledgments, without interrupting the user's workflow.
2. Feedback: Toasts are effective for giving users immediate feedback on their interactions, such as saving changes or completing tasks.

Properties

• Message Content: Toasts should display concise and clear messages. Text should be easy to read and comprehend, and it should provide sufficient context for users.
• Close Button: Each toast includes a close button to allow users to dismiss the message at any time. This feature is particularly useful for users who may need more time to read the message.
• Time: New toasts should display "just now" as opposed to the numeral seconds shown in older toasts. This enhances user comprehension.

Placement

• Bottom Center in Mobile: Toasts are positioned 1 rem above the bottom of the viewport in mobile view.
• Top Center in Desktop: Toasts are positioned 1 rem below the top of the viewport in desktop view.

Duration

• Default: To auto-dismiss after 5 seconds. This ensures that the toast messages do not linger and disrupt the user's experience.
• For Important Information: The toast can be set to persist until the user dismisses the message. This is particularly useful for critical or user-initiated actions.

Stacking

• Maximum Number of Toasts in a Container: Limited to 3. New toasts will replace older toasts when the limit is reached.
• Gap Between Toasts: Maintain a consistent 0.75 rem gap between toasts, following the Bootstrap 5 default styling.
• Stacking Order: New toasts will be displayed above older toasts, ensuring that the most recent information is visible.

Customization

• Icons: The choice of icons for each toast type will be customizable. However, icons should be hidden in mobile view to optimize the user experience.
• Color Schemes: Currently, color schemes are not customizable, and they should adhere to the specified styles.
• Animation: The default behavior for animation is set to "true" (Bootstrap 5.3 default). This adds a CSS fade transition to the toast messages, providing a smooth user experience.

When implementing Toast UI Components, it is essential to consider accessibility. To ensure a positive user experience:

• Use concise and clear messages in your toasts. Text should be easy to read and comprehend, and it should provide sufficient context for users.
• Each toast should include a close button, allowing users to dismiss the message at any time. This feature is especially useful for users who may need more time to read the message.
• For time-based toasts, consider displaying "just now" instead of numeral seconds in older toasts. This simplifies the experience for users.
• Make sure to apply role="alert" aria-live="assertive" aria-atomic="true" to content that is not updated frequently, like elapsed time. Adding these attributes to elements that are updated every second will cause screen readers to make repeated announcements which is very distracting and confusing for screen reader users.

  <div id="toastContainer" class="toast-container">
    <!-- To be populated with toasts -->
    <div
      class="toast fade show"
      data-bs-config='{"autohide":false,"animation":true}'>
      <div class="toast-body">
        <div class="toast-inner-body">
          <div class="toast-message">
            <p
              role="alert"
              aria-live="assertive"
              aria-atomic="true">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                height="1em"
                viewBox="0 0 512 512"
                ><path
                  fill="#fff"
                  d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
                ></path></svg
              >
              Short message here
            </p>
          </div>
          <p class="time">
            <time datetime="2023-10-27T18:05:04.713Z">8 seconds ago</time>
          </p>
        </div>
        <button
          type="button"
          class="btn bnt-sm btn-close btn-close-white p-1"
          data-bs-dismiss="toast"
          aria-label="Close"></button>
      </div>
    </div>
  </div>
    

See React Bootstrap documentation for examples.