Alert

ui-alert shows a short message in a bordered box, with an optional icon on the left and ui-alert-title and ui-alert-description stacked beside it. The element has the ARIA role alert, so screen readers announce it when it is added to the page. It fills the width of its container.

Preview

index.html

Changes saved

Your profile was updated. It can take a minute to show everywhere.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alert demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/alert.html"></import-element>

  <div class="demo-medium">
    <ui-alert>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
      <ui-alert-title>Changes saved</ui-alert-title>
      <ui-alert-description>Your profile was updated. It can take a minute to show everywhere.</ui-alert-description>
    </ui-alert>
  </div>
</body>
</html>

Examples

Destructive

Use variant="destructive" for errors. The title and icon switch to the destructive colour and the description takes a tint of it.

Preview

index.html

Payment failed

Your card was declined. Check the card details and try again.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alert demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/alert.html"></import-element>

  <div class="demo-medium">
    <ui-alert variant="destructive">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
      <ui-alert-title>Payment failed</ui-alert-title>
      <ui-alert-description>Your card was declined. Check the card details and try again.</ui-alert-description>
    </ui-alert>
  </div>
</body>
</html>

Without an icon

The icon is optional. The title and description keep their column.

Preview

index.html

Scheduled maintenance

The dashboard will be read-only on Sunday from 02:00 to 03:00 UTC.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alert demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/alert.html"></import-element>

  <div class="demo-medium">
    <ui-alert>
      <ui-alert-title>Scheduled maintenance</ui-alert-title>
      <ui-alert-description>The dashboard will be read-only on Sunday from 02:00 to 03:00 UTC.</ui-alert-description>
    </ui-alert>
  </div>
</body>
</html>

Title only

Preview

index.html

A new version is available. Reload to update.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alert demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/alert.html"></import-element>

  <div class="demo-medium">
    <ui-alert>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
      <ui-alert-title>A new version is available. Reload to update.</ui-alert-title>
    </ui-alert>
  </div>
</body>
</html>

Rich description

ui-alert-description is a grid, so paragraphs and lists inside it stack with a small gap.

Preview

index.html

Unable to process your payment

Please verify your billing information:

Check the card number
Make sure the billing address matches

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alert demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
    .demo-text {
      margin: 0;
      font-size: var(--text-sm);
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/alert.html"></import-element>

  <div class="demo-medium">
    <ui-alert variant="destructive">
      <ui-alert-title>Unable to process your payment</ui-alert-title>
      <ui-alert-description>
        <p class="demo-text">Please verify your billing information:</p>
        <ul>
          <li>Check the card number</li>
          <li>Make sure the billing address matches</li>
        </ul>
      </ui-alert-description>
    </ui-alert>
  </div>
</body>
</html>

API

Parts

Part	Slot	Renders
`ui-alert`		The bordered box. A two-column grid: a leading `<svg>` icon in the first column, everything else in the second.
`<svg>`	(default)	Optional icon as a direct child of `ui-alert`. Sized to `calc(var(--spacing) * 4)` and spans the title and description rows.
`ui-alert-title`	(default)	The heading line, in medium weight.
`ui-alert-description`	(default)	Muted text under the title (tinted destructive in the destructive variant). A grid, so `<p>` and `<ul>` stack.

Each part has a single default slot that takes any content.

ui-alert attributes

Attribute	Type	Default	Description
`variant`	`"default"` \| `"destructive"`	`"default"`	Colour scheme of the alert.

Accessibility

The element has the implicit role alert (set through ElementInternals), which makes it a live region. Screen readers read its content when it is inserted. This is usually harmless for content present on page load, but avoid putting many alerts on one page.

Edit this page on GitHub · View as Markdown