Alert

A message about something that happened, set into the page it is about.

import { Alert } from 'neba';

<Alert color="success">Your changes have been saved.</Alert>
<Alert color="danger" title="Deploy failed" onClose={dismiss}>
  The build exited with code 1.
</Alert>;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface. An alert *is* the thing being coloured, so the sheet takes the tint. Reach for text inside a form
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'info'	The severity: it picks the surface and the glyph together. The default is info rather than primary — an alert with no severity named is an informational one
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. An alert sits in the flow of the page; the one that floats is a Toast
title	ReactNode	—	The heading line. With it the alert is two-part; without it the whole thing is one line
icon	ReactNode | false	—	The glyph at the start. Defaults to the one that goes with `color`; `false` drops it. The shapes differ per family so severity is not carried by colour alone
action	ReactNode	—	Content pinned to the end of the row. Stays on the first line while the message wraps
onClose	(event) => void	—	Passing it is what makes the dismiss button appear
closeLabel	string	'Dismiss'	Accessible name of the dismiss button
children	ReactNode	—	The message

Examples

The three shapes are one component

A bare line, a line with a glyph, and a glyph with a headline and the detail under it. They are not three components — they are the same slots, filled to different depths. Nothing about the surface changes between them; only how much of it is used.

import { Alert } from 'neba';

export default function AlertShapes() {
  return (
    <div className="flex w-full flex-col gap-3">
      {/* A bare line: no glyph, nothing but the sentence. */}
      <Alert icon={false}>Scheduled maintenance on Sunday at 02:00 UTC.</Alert>

      {/* The default: a glyph and a line. */}
      <Alert color="info">Scheduled maintenance on Sunday at 02:00 UTC.</Alert>

      {/* A headline with the detail under it. */}
      <Alert color="info" title="Scheduled maintenance">
        The API will be read-only on Sunday between 02:00 and 03:00 UTC.
      </Alert>
    </div>
  );
}

Variants

An alert is the thing being coloured — it is a notice about a severity, not a container holding someone else's content — so unlike a Box its sheet takes the tint. text is the one to reach for inside a form, where a second bordered rectangle among the fields is one rectangle too many.

import { Alert } from 'neba';

export default function AlertVariants() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Alert variant="solid" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
      <Alert variant="outline" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
      <Alert variant="text" color="warning" title="Card expiring">
        Your card ends in 4242 and expires next month.
      </Alert>
    </div>
  );
}

Severities

import { Alert } from 'neba';

const MESSAGES = [
  { color: 'info', text: 'Two review apps are still building.' },
  { color: 'success', text: 'Deployed to production.' },
  { color: 'warning', text: 'This region is at 90% of its quota.' },
  { color: 'danger', text: 'The database is unreachable.' }
] as const;

export default function AlertColors() {
  return (
    <div className="flex w-full flex-col gap-3">
      {MESSAGES.map((message) => (
        <Alert key={message.color} color={message.color}>
          {message.text}
        </Alert>
      ))}
    </div>
  );
}

Actions and dismissing

action is kept out of children so it stays on the first line while the message wraps beside it. Passing onClose is what makes the × appear.

import { useState } from 'react';
import { Alert, Button } from 'neba';

export default function AlertDismissing() {
  const [shown, setShown] = useState(true);

  return (
    <div className="flex w-full flex-col items-start gap-3">
      {shown ? (
        <Alert
          color="info"
          title="A new version is available"
          action={
            <Button size="xs" variant="outline" color="info">
              Reload
            </Button>
          }
          closeLabel="Dismiss the update notice"
          onClose={() => setShown(false)}
        >
          Version 2.4 fixes the deploy log ordering.
        </Alert>
      ) : (
        <Button size="sm" variant="text" onClick={() => setShown(true)}>
          Bring it back
        </Button>
      )}
    </div>
  );
}

The glyph is part of the message

There are three drawings for six families rather than one exclamation mark dyed six ways. Colour alone is not something every reader has, and an alert that says "this went wrong" only in red says it only to some of them. primary and secondary have no severity to draw, so they take the note the informational alert uses.

Pass icon={false} when the surrounding copy already says what kind of message this is, and a node when you have a better drawing for it.

Accessibility

The severity picks the live region: warning and danger get role="alert", which interrupts whatever a screen reader is in the middle of saying, and the rest get role="status", which waits for a pause. "This failed" is worth interrupting for and "saved" is not.

A caller who knows better still wins — role passes straight through and lands after the default.

color is info by default rather than primary. This is the one place primary would be a lie: an alert is not the primary anything, it is a note, and the palette already has a word for that.