A-One Design System

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 application to Hills Road Sixth Form 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 schools match your search

8 sixth forms added near you.

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.

Application submitted

Your application to Hills Road Sixth Form has been submitted.

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

Your application to Hills Road Sixth Form has been submitted. A confirmation email has been sent to your 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

Your saved-search summary 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