Components

Alert

An inline status message: a 1px-bordered, status-tinted surface with a 3px accent bar drawn on the left. Four status families, an optional dismiss button, and an app-level variant that fills with a solid status color and white text.

Status variants

The left bar and border take the status color; the background is the matching tint.

Info · success · warning · danger

Pricing matrix synced 2 minutes ago.

Saved

Your changes have been published.

Some rates are missing a currency.

The export failed — try again.

<div class="ds-alert ds-alert--info" role="status">
  <div class="ds-alert__content">Pricing matrix synced 2 minutes ago.</div>
</div>

<div class="ds-alert ds-alert--success" role="status">
  <div class="ds-alert__content">
    <div class="ds-alert__title">Saved</div>Your changes have been published.
  </div>
</div>

<div class="ds-alert ds-alert--warning" role="alert">
  <div class="ds-alert__content">Some rates are missing a currency.</div>
</div>

<div class="ds-alert ds-alert--danger" role="alert">
  <div class="ds-alert__content">The export failed — try again.</div>
</div>

Icon, actions & dismiss

An __icon slot leads; an __actions row trails the content; the borderless __close × sits at the far right. Click × to dismiss this one live.

Dismissible

Unsaved changes

You have edits that haven’t been published yet.

<div class="ds-alert ds-alert--warning" role="alert">
  <span class="ds-alert__icon" aria-hidden="true"><svg>…</svg></span>
  <div class="ds-alert__content">
    <div class="ds-alert__title">Unsaved changes</div>
    You have edits that haven’t been published yet.
    <div class="ds-alert__actions">
      <button class="ds-button ds-button--primary">Publish</button>
      <button class="ds-button">Discard</button>
    </div>
  </div>
  <button class="ds-alert__close" type="button" aria-label="Dismiss">×</button>
</div>

App-level

The --app modifier fills the bar full width with a solid status color and white text — for page-top or banner messages.

.ds-alert--app

Scheduled maintenance tonight at 22:00 UTC — saving will be disabled.

<div class="ds-alert ds-alert--app ds-alert--danger" role="alert">
  <div class="ds-alert__content">Scheduled maintenance tonight at 22:00 UTC.</div>
  <button class="ds-alert__close" type="button" aria-label="Dismiss">×</button>
</div>

React

The <Alert> component renders the same markup and manages its own dismissed state when uncontrolled.

<Alert>

import { Alert } from "@diametral/design-system/react";

<Alert type="success" dismissible onDismiss={() => log("closed")}>
  Your changes have been published.
</Alert>

<Alert type="danger" app>
  Scheduled maintenance tonight at 22:00 UTC.
</Alert>