Design System Preview

Toast notifications that appear in the top-right corner, auto-dismiss after a configurable duration, and support stacking. Uses neutral white cards with elevated shadow. Hover pauses the auto-dismiss timer. Requires floating_notification_controller.js for animation and auto-dismiss behavior.

Basic Notification

Basic: A simple notification with title and close button. The .tw-floating-notification-visible class is applied inline here for static display.

Application saved

<div class="tw-floating-notification tw-floating-notification-visible">

        <div class="tw-floating-notification-content">

          <p class="tw-floating-notification-title">Application saved</p>

        </div>

        <button class="tw-floating-notification-close" type="button" aria-label="Close">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

With Title and Message

Title + Message: Use .tw-floating-notification-title for the bold heading and .tw-floating-notification-message for a supporting description below.

Application submitted

Your Year 7 application for Emma Johnson has been received. Confirmation sent to your email.

<div class="tw-floating-notification tw-floating-notification-visible">

        <div class="tw-floating-notification-content">

          <p class="tw-floating-notification-title">Application submitted</p>

          <p class="tw-floating-notification-message">Description text...</p>

        </div>

        <button class="tw-floating-notification-close" ...>...</button>

      </div>

With Icons

Icons: Add a .tw-floating-notification-icon element before the content area. Uses Font Awesome 6 icons. The icon inherits neutral-600 color by default.

New admissions cycle open

Year 7 entry for 2027 is now accepting applications.

Changes saved successfully

Deadline approaching

Application deadline is in 3 days.

Upload failed

The file exceeds the 10MB size limit. Please try a smaller file.

Generating report...

This may take a few moments.

Syncing data

<div class="tw-floating-notification tw-floating-notification-visible">

        <div class="tw-floating-notification-icon">

          <i class="fa-solid fa-circle-info"></i>

        </div>

        <div class="tw-floating-notification-content">...</div>

        <button class="tw-floating-notification-close" ...>...</button>

      </div>

Icon color override: Add Tailwind text color utilities to the icon element:
text-green-600 (success) | text-orange-600 (warning) | text-red-600 (error)

With Actions

Actions: Use .tw-floating-notification-actions inside the content area for action buttons. Notifications with actions auto-dismiss after 7 seconds instead of 4. Use data-auto-dismiss="0" to disable auto-dismiss for critical actions.

New application received

Emma Johnson submitted a Year 7 application.

Application archived

Moved to archived applications folder.

Export ready

Your CSV export is ready for download.

<div class="tw-floating-notification-content">

        <p class="tw-floating-notification-title">Title</p>

        <p class="tw-floating-notification-message">Message</p>

        <div class="tw-floating-notification-actions">

          <button class="tw-btn tw-btn-sm tw-btn-primary" type="button">Action</button>

          <button class="tw-btn tw-btn-sm tw-btn-tertiary" type="button">Dismiss</button>

        </div>

      </div>

Full Example

Full Example: Combines icon, title, message, actions, and close button. This matches the primary design spec for the component.

Application submitted successfully

Year 7 entry application for Emma Johnson has been submitted. A confirmation email has been sent to the registered email address.

Progress Bar

Progress: The .tw-floating-notification-progress wrapper is hidden by default and becomes visible when it contains child content. Nest a .progress / .progress-bar component inside for determinate or indeterminate states.

Uploading documents...

3 of 5 files uploaded

Processing upload...

Please wait while we process your files

<div class="tw-floating-notification-progress">

        <div class="tw-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">

          <div class="tw-progress-bar tw-progress-bar-primary" style="width: 60%"></div>

        </div>

      </div>

Use .progress-indeterminate for unknown completion (e.g., processing uploads).

Stacked Notifications

Stacking: Multiple notifications stack vertically with a gap-3 gap inside the .tw-floating-notification-container. Newest notifications appear at the top. This static example simulates the stacking layout without fixed positioning.

Changes saved

2 new applications received

Applications from Oliver Smith and Amelia Brown are ready for review.

Session expiring soon

Your session will expire in 5 minutes. Save your work.

Interactive Demo

Live: These notifications use data-controller="floating-notification" for real slide-in animation and auto-dismiss. They are positioned inside a relative container for this demo instead of the fixed top-right position used in production. Hover over a notification to pause its auto-dismiss timer.

Settings updated

Your notification preferences have been saved.

Report generated

Admissions summary for Term 1 is ready.

3 applications pending review

<div class="tw-floating-notification-container"

           data-controller="floating-notification"

           role="status" aria-live="polite">

        <div class="tw-floating-notification"

             data-floating-notification-target="notification">

          <div class="tw-floating-notification-icon">...</div>

          <div class="tw-floating-notification-content">

            <p class="tw-floating-notification-title">Title</p>

            <p class="tw-floating-notification-message">Message</p>

          </div>

          <button class="tw-floating-notification-close"

                  data-action="click->floating-notification#dismiss"

                  aria-label="Close">...</button>

        </div>

      </div>

Auto-dismiss: Default 4s | With actions 7s | data-auto-dismiss="0" to disable | data-auto-dismiss="10000" for custom duration