Alert components

Powerful and customizable React alert components built for modern applications and websites. These alert components are built using React Aria and styled with Tailwind CSS.

Installation

You can add this alerts component using our CLI or manually:

npx untitledui@latest add alerts

Alert examples

Below are examples and variations of this alert component:

API reference

AlertFloating

Import AlertFloating from @/components/application/alerts/alerts. Renders a <div> element.

AlertFloating props
PropTypeDefaultDescription
title* (required)string—The title of the alert.
description* (required)ReactNode—The description of the alert.
confirmLabel* (required)string—The label for the confirm button.
dismissLabelstring"Dismiss"The label for the dismiss button.
color
"default""brand""gray""error""warning""success"
"default"The color of the alert.
onClose(() => void)—The function to call when the dismiss button is clicked.
onConfirm(() => void)—The function to call when the confirm button is clicked.

AlertFullWidth

Import AlertFullWidth from @/components/application/alerts/alerts. Renders a <div> element.

AlertFullWidth props
PropTypeDefaultDescription
title* (required)string—The title of the alert.
description* (required)ReactNode—The description of the alert.
confirmLabel* (required)string—The label for the confirm button.
dismissLabelstring"Dismiss"The label for the dismiss button.
actionType
"button""link"
"button"The type of the action buttons.
color
"default""brand""gray""error""warning""success"
"default"The color of the alert.
onClose(() => void)—The function to call when the dismiss button is clicked.
onConfirm(() => void)—The function to call when the confirm button is clicked.
classNamestring—Class name applied to the root banner element.

FAQs

Please refer to our frequently asked questions page for more.

AlertFloating is a self-contained rounded card with a border and shadow that you place inside your layout, while AlertFullWidth is an edge-to-edge banner that centers its content in a max-w-container wrapper. Only AlertFullWidth accepts the actionType and className props.

Both alerts accept a color prop of "default", "brand", "gray", "error", "warning" or "success", defaulting to "default". The color also selects the featured icon: InfoCircle for "default", "brand" and "gray", AlertCircle for "error" and "warning", and CheckCircle for "success".

Pass an onClose callback. That renders both the text dismiss action and the small CloseButton, and the alert has no dismiss affordance at all when onClose is omitted. The icon button sits in the top-right corner of AlertFloating, while on AlertFullWidth it is absolutely positioned in the corner on mobile and becomes static from the md breakpoint up, sitting inline beside the actions.

Pass onConfirm together with a confirmLabel string. The action row only renders when onConfirm or onClose is supplied, so a purely informational alert can omit both. confirmLabel is typed as required on both AlertFloating and AlertFullWidth, so pass one even when you leave out onConfirm.

Yes, use the dismissLabel prop, which defaults to "Dismiss". The same string is also passed to the CloseButton as its accessible label, so translating it keeps the icon button labeled correctly.

Set actionType on AlertFullWidth to "link"; it defaults to "button". With "button" the actions render as "secondary" and "primary" buttons that stack on mobile, and with "link" they render as "link-gray" and "link-color" buttons that stay on one row.

Yes, description is typed as ReactNode so you can pass JSX, while title must be a plain string. Keep the description short, since it is truncated to a single line from the md breakpoint up.

Activity gaugesBreadcrumbs