LayoutUI
Theme Presets
Browse Components

Alert

Persistent messages, inline or across a page.

Basic

A persistent message within the page layout.

Scheduled maintenance

The workspace will be unavailable on Sunday from 02:00 to 03:00 UTC.

View Code
HTML
<div class="alert" data-tone="info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon alert-icon"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="12" cy="12" r="9">
    </circle>
    <path d="M12 11v6m0-10v.1">
    </path>
  </svg>
  <div class="alert-content">
    <strong class="alert-title">
      Scheduled maintenance
    </strong>
    <p>
      The workspace will be unavailable on Sunday from 02:00 to 03:00 UTC.
    </p>
  </div>
</div>

Inline message

Keep a short message and action together; actions wrap below on small screens.

A new workspace version is available.

Read the Guide
View Code
HTML
<div class="alert alert-inline" data-tone="info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon alert-icon"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="12" cy="12" r="9">
    </circle>
    <path d="M12 11v6m0-10v.1">
    </path>
  </svg>
  <div class="alert-content">
    <p class="alert-message">
      A new workspace version is available.
    </p>
    <div class="alert-actions">
      <a class="btn secondary btn-sm" href="/docs">
        Read the Guide
      </a>
    </div>
  </div>
  <button
    class="btn ghost btn-icon alert-dismiss"
    type="button"
    data-alert-dismiss
    aria-label="Dismiss Message"
    hidden
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon"
      aria-hidden="true"
      focusable="false"
    >
      <path d="m6 6 12 12M18 6 6 18">
      </path>
    </svg>
  </button>
</div>

Status messages

Use a clear message and icon as well as color.

Update available

A new workspace version is ready.

Changes saved

Your preferences have been updated.

Storage nearly full

Remove unused files before uploading more.

Upload failed

Check your connection and try again.

View Code
HTML
<div class="stack">
  <div class="alert" data-tone="info">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon alert-icon"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="12" cy="12" r="9">
      </circle>
      <path d="M12 11v6m0-10v.1">
      </path>
    </svg>
    <div class="alert-content">
      <strong class="alert-title">
        Update available
      </strong>
      <p>
        A new workspace version is ready.
      </p>
    </div>
  </div>
  <div class="alert" data-tone="success">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon alert-icon"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="12" cy="12" r="9">
      </circle>
      <path d="m7 12 3 3 7-7">
      </path>
    </svg>
    <div class="alert-content">
      <strong class="alert-title">
        Changes saved
      </strong>
      <p>
        Your preferences have been updated.
      </p>
    </div>
  </div>
  <div class="alert" data-tone="warning">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon alert-icon"
      aria-hidden="true"
      focusable="false"
    >
      <path d="M10 5q2-3 4 0l7 13q2 3-2 3H5q-4 0-2-3L10 5ZM12 9v5m0 3v.1">
      </path>
    </svg>
    <div class="alert-content">
      <strong class="alert-title">
        Storage nearly full
      </strong>
      <p>
        Remove unused files before uploading more.
      </p>
    </div>
  </div>
  <div class="alert" data-tone="error">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon alert-icon"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="12" cy="12" r="9">
      </circle>
      <path d="m9 9 6 6m0-6-6 6">
      </path>
    </svg>
    <div class="alert-content">
      <strong class="alert-title">
        Upload failed
      </strong>
      <p>
        Check your connection and try again.
      </p>
    </div>
  </div>
</div>

With an action

Keep the next step close to the message.

Get started

Learn how to set up your workspace.

Read the Guide
View Code
HTML
<div class="alert" data-tone="info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon alert-icon"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="12" cy="12" r="9">
    </circle>
    <path d="M12 11v6m0-10v.1">
    </path>
  </svg>
  <div class="alert-content">
    <strong class="alert-title">
      Get started
    </strong>
    <p>
      Learn how to set up your workspace.
    </p>
    <div class="alert-actions">
      <a class="btn secondary btn-sm" href="/docs">
        Read the Guide
      </a>
    </div>
  </div>
</div>

Dismissible

Dismiss the message with a keyboard or pointer. Reload the page to restore this example.

Export ready

Your files are ready to download.

View Code
HTML
<div class="alert" data-tone="success">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon alert-icon"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="12" cy="12" r="9">
    </circle>
    <path d="m7 12 3 3 7-7">
    </path>
  </svg>
  <div class="alert-content">
    <strong class="alert-title">
      Export ready
    </strong>
    <p>
      Your files are ready to download.
    </p>
  </div>
  <button
    class="btn ghost btn-icon alert-dismiss"
    type="button"
    data-alert-dismiss
    aria-label="Dismiss Message"
    hidden
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon"
      aria-hidden="true"
      focusable="false"
    >
      <path d="m6 6 12 12M18 6 6 18">
      </path>
    </svg>
  </button>
</div>

Right-to-left

Icons, actions and dismissal follow the reading direction.

עדכון זמין

גרסה חדשה של סביבת העבודה זמינה.

View Code
HTML
<div dir="rtl" lang="he">
  <div class="alert" data-tone="info">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon alert-icon"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="12" cy="12" r="9">
      </circle>
      <path d="M12 11v6m0-10v.1">
      </path>
    </svg>
    <div class="alert-content">
      <strong class="alert-title">
        עדכון זמין
      </strong>
      <p>
        גרסה חדשה של סביבת העבודה זמינה.
      </p>
    </div>
    <button
      class="btn ghost btn-icon alert-dismiss"
      type="button"
      data-alert-dismiss
      aria-label="Dismiss Message"
      hidden
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon"
        aria-hidden="true"
        focusable="false"
      >
        <path d="m6 6 12 12M18 6 6 18">
        </path>
      </svg>
    </button>
  </div>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.cssbutton.cssalert.cssalert.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/alert.css">
<script defer src="/library/assets/alert.js"></script>

13,865 bytes CSS including base · 1,574 bytes runtime JavaScript

Usage

Messages and announcements

Static page messages do not need a live-region role. Use role=status for dynamically inserted updates; reserve role=alert for urgent errors. Include meaningful text and a status icon so color is not the only cue.

Banners and dismissal

alert-inline pairs a short message with a trailing action; alert-banner fills its parent. Both wrap actions on small screens. It is not fixed or sticky by default. Optional dismissal reveals a hidden close button and keeps keyboard focus outside the dismissed message. Applications own actions, persistence and restoring messages.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.