Alert

import { Alert } from '@elirobinson/react/components/molecules/Alert';

import { Alert } from '@elirobinson/react/components/molecules/Alert';

export default function Basic() {
  return (
    <Alert title="Heads up">
      Your coaching guide export is ready — download it before the link expires in 24 hours.
    </Alert>
  );
}

When to use it

Use Alert for a status message tied to the content around it — a save confirmation above a form, a warning inline in a settings panel. It stays on the page until you remove it or the underlying condition changes; it doesn't dismiss itself.

For a message that should interrupt briefly and then go away, use Toast instead. For a single-word status label inline with other content (a row, a card header), Badge is the lighter option — Alert is for a sentence, not a tag.

Variants

default is a neutral callout with no color association — use it for information that isn't good or bad news. The other four map to status meaning: success, warning, danger, info.

import { Alert } from '@elirobinson/react/components/molecules/Alert';

export default function Variants() {
  return (
    <div className="demo-col">
      <Alert title="Draft saved">Your invoice draft is saved — you can finish it any time.</Alert>
      <Alert variant="success" title="Payment received">
        Invoice #1042 is marked paid. A receipt was sent to the client.
      </Alert>
      <Alert variant="warning" title="Review needed">
        Two line items are missing a rate. Fix them before sending.
      </Alert>
      <Alert variant="danger" title="Send failed">
        The invoice email bounced — double-check the client's address and try again.
      </Alert>
      <Alert variant="info" title="Heads up">
        Coaching Guides are moving to a new store next month. Your links won't change.
      </Alert>
    </div>
  );
}

Props

Accessibility

• Renders with role="alert" by default, which most screen readers announce immediately as an assertive live region — reserve Alert for messages that genuinely need that interruption. Pass role="status" explicitly for a politer, non-interrupting announcement.
• title and children are both optional and render as separate elements (ds-alert__title, ds-alert__description) — pass at least one; an Alert with neither renders an empty shell.
• There's no built-in dismiss button. If you need one, compose it yourself and manage the Alert's presence in state — the component doesn't invent a close affordance.
• The ref forwards to the outer <div>.

Related