Orbit

Alert

Source

A tinted callout that communicates a message and its severity. The variant abstracts away the icon and every color decision, so styling is closed: there is no className escape hatch.

Variants

A muted info default plus three severity variants. Each picks its own icon, tinted surface and accent color.

For your information

A muted, neutral alert with no severity attached.

Check your settings

Something needs your attention before continuing.

Payment failed

We couldn't charge your card. Update it to retry.

All set

Your changes were saved successfully.

<Alert
  variant="info"
  title="For your information"
  description="A muted, neutral alert with no severity attached."
/>
<Alert
  variant="warning"
  title="Check your settings"
  description="Something needs your attention before continuing."
/>
<Alert
  variant="danger"
  title="Payment failed"
  description="We couldn't charge your card. Update it to retry."
/>
<Alert
  variant="success"
  title="All set"
  description="Your changes were saved successfully."
/>

Title only

The description is optional. Omit it for a compact, single-line alert.

Title-only alerts are allowed too

<Alert variant="info" title="Title-only alerts are allowed too" />

Rich description

The description accepts inline elements — links, bold text and the like — not just a plain string.

Domain not verified

Add the TXT record, then retry. See the setup guide for details.

<Alert
  variant="info"
  title="Domain not verified"
  description={
    <>
      Add the TXT record, then <strong>retry</strong>. See the{' '}
      <a href="/docs/domains">setup guide</a> for details.
    </>
  }
/>

Loading

Set loading to swap the variant icon for a spinner while the alert subject resolves. Colors and layout stay put.

Checking your domain

This usually takes a few seconds.

<Alert
  variant="info"
  title="Checking your domain"
  description="This usually takes a few seconds."
  loading
/>

Dismissible

Pass onDismiss to render a dismiss button. The handler fires on press; the alert itself stays controlled by the caller.

Unsaved changes

Save before you leave, or dismiss this notice.

<Alert
  variant="warning"
  title="Unsaved changes"
  description="Save before you leave, or dismiss this notice."
  onDismiss={() => setVisible(false)}
/>

Actions

Pass one or two actions to render call-to-action buttons bottom-right. The first is the primary button, the second a ghost button; they stack vertically on mobile.

Update available

A new version is ready to install.

<Alert
  variant="info"
  title="Update available"
  description="A new version is ready to install."
  actions={[
    { text: 'Update now', onClick: onUpdate },
    { text: 'Later', onClick: onDismiss },
  ]}
/>

Props

Alert has no className prop. The variant controls the icon and all colors.

variant

AlertVariantdefault: 'info'

Picks the icon, surface tint and accent color in one go, mapping the alert to its meaning.

title

string

required

The headline, rendered in the variant's accent color.

description

ReactNode

Supporting copy beneath the title. Accepts inline elements (links, bold text, …), not just a string. Omit for a title-only alert.

loading

boolean

Swaps the variant icon for a spinner while the alert subject resolves.

onDismiss

(() => void)

Called when the dismiss button is pressed. Provide it to render a dismiss button; omit for a persistent alert.

actions

ButtonGroupActions

One or two call-to-action buttons, rendered bottom-right via ButtonGroup. The first is primary, the second a ghost button.