Alert

A message about something that just happened, set into the page. Use it for notices that stay on screen: a save confirmation, a validation error, a setting that needs attention.

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
locale	string	—	BCP 47 tag naming the dismiss button in that language
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	—	Accessible name of the dismiss button
children	ReactNode	—	The message
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="slide"). Wrap it in an Animate* component for a trigger or a replay

color defaults to info rather than primary.

Examples

title and children

children alone is a one-line notice; adding title gives you a headline with the detail under it. It is the same component with a different number of slots filled.

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>
  );
}

variant

An alert is the thing being coloured, so unlike a Box its sheet takes the tint. Use text inside a form, where a second bordered rectangle among the fields is one 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>
  );
}

color

color sets the severity, and the glyph changes with it. Three drawings cover the six families, so the kind of message carries even where the colour does not.

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>
  );
}

icon

Pass a node to replace the default glyph, or icon={false} to draw none.

An <svg> anywhere in an alert is sized to 1.2em of the text around it, so an icon from any set arrives at the right size without being told one. Anything that is not an <svg> — an <img>, a sprite, a glyph in a font — carries its own size.

action and onClose

action is a slot outside 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>
  );
}

Accessibility

• The severity picks the live region: warning and danger get role="alert", which interrupts what a screen reader is saying, and the rest get role="status", which waits for a pause.
• Passing role yourself overrides the default.
• With several alerts on screen, use closeLabel to name what is being dismissed.
• locale decides the dismiss button's accessible name; closeLabel writes it out instead.