Alert
A message that sits in the page: an icon in its colour, a title, a line of detail, and room for an action.
- Close the build alert: the button calls onClose, and the page decides to hide it.
- Danger and warning are
role="alert"and interrupt a screen reader; the other colours arerole="status"and wait. - endContent puts an action at the right, level with the title.
Field marks
- Import
import { Alert } from "cennge-ui";- Size
- 1.5 KB gzip for this import, its dependencies aside
- Pattern
role="alert"for danger and warning,role="status"for the rest- State
- None: you render it or not;
onCloseonly reports the click - SSR
- Rendered on the server in the Next.js check; hydrates without a warning
- Icon
- A check, a warning sign, a cross or an info mark, by colour; swap it with
icon, hide it withicon={false} - Tests
- Unit tests
- Source
- src/components/alert
When to use#
An Alert belongs to a place on the page and says something about it: a failed build above its logs, a key that is about to expire on the settings page. It stays until the page removes it, so it suits a state that lasts, not the result of a click a moment ago.
Similar#
- Toast reports what happened a moment ago from a corner of the screen, then leaves by itself.
- AlertDialog stops everything until the reader answers; an Alert asks nothing.
- EmptyState fills a list that has nothing in it; it is not a message about an event.
Variants#
flat is a tint of the colour and the default. bordered draws only an edge, faded sets a neutral panel with an edge, and solid fills the box with the colour for the one message that must not be missed.
import { Alert, type AlertVariant } from "cennge-ui";
const variants: AlertVariant[] = ["flat", "bordered", "faded", "solid"];
export default function AlertVariants() {
return (
<div className="flex w-full max-w-xl flex-col gap-3">
{variants.map((variant) => (
<Alert
key={variant}
variant={variant}
color="info"
title={variant[0]!.toUpperCase() + variant.slice(1)}
description="cennge-ui 0.3.1 is out. Run npm update cennge-ui."
/>
))}
</div>
);
}Colours and what screen readers hear#
The colour also sets the role. danger and warning render role="alert", which interrupts a screen reader; every other colour renders role="status", which waits its turn. Success, warning and danger have icons of their own; the other colours share an info mark.
import { Alert } from "cennge-ui";
export default function AlertColors() {
return (
<div className="flex w-full max-w-xl flex-col gap-3">
{/* role="status": read when the screen reader is free. */}
<Alert title="Drafts are visible only to you" />
<Alert color="info" title="ai-niche-scout moved to a new default branch" description="main replaces master." />
<Alert color="success" title="All checks passed" description="Typecheck, unit tests and build on main." />
{/* role="alert": interrupts the screen reader. */}
<Alert color="warning" title="2 dependencies are a major version behind" />
<Alert color="danger" title="Deploy failed" description="spredo-crypto-screener is still on the previous release." />
</div>
);
}Closing it, acting on it#
isClosable adds a close button with the name "Close". The Alert keeps no open state of its own: hide it in onClose, as here. endContent takes the action that fixes the problem.
import { useState } from "react";
import { Alert, Button } from "cennge-ui";
export default function DismissibleAlert() {
const [isOpen, setOpen] = useState(true);
if (!isOpen) {
return (
<Button variant="flat" onClick={() => setOpen(true)}>
Show the alert
</Button>
);
}
return (
<Alert
color="primary"
title="Two-factor authentication is off"
description="Turn it on before you publish to npm from this account."
endContent={
<Button size="sm" color="primary">
Turn on
</Button>
}
isClosable
onClose={() => setOpen(false)}
className="max-w-xl"
/>
);
}Props#
Also takes every attribute of <div>, except title, color, which mean something else here.