Overlay

Alert

Inline banner for contextual feedback with four statuses and three visual variants. Uses role="alert" for warning/danger and role="status" otherwise.

Import

import { Alert } from "@zephora/react";

Examples

Statuses

Heads up

A new version is available.

Saved

Your profile has been updated.

Storage low

Less than 1 GB remaining.

Payment failed

The card was declined.

<Alert status="info" title="Heads up">A new version is available.</Alert>
<Alert status="success" title="Saved">Your profile has been updated.</Alert>
<Alert status="warning" title="Storage low">Less than 1 GB remaining.</Alert>
<Alert status="danger" title="Payment failed">The card was declined.</Alert>

Variants

soft (default), solid and outline.

Soft

Solid

Outline

<Alert variant="soft" status="success" title="Soft" />
<Alert variant="solid" status="success" title="Solid" />
<Alert variant="outline" status="success" title="Outline" />

Closable

`closable` renders a close button; you own the visibility state.

Trial ending

Your trial ends in 3 days.

const [visible, setVisible] = React.useState(true);

{visible && (
  <Alert status="warning" title="Trial ending" closable onClose={() => setVisible(false)}>
    Your trial ends in 3 days.
  </Alert>
)}

API

Alert props

Prop	Type	Default	Description
`status`	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Semantic tone; also picks the built-in icon and ARIA role.
`variant`	`"soft" \| "solid" \| "outline"`	`"soft"`	Visual style.
`title`	`ReactNode`	—	Bold first line of the banner.
`icon`	`ReactNode`	—	Custom leading icon; pass null to hide the default status icon.
`closable`	`boolean`	`false`	Renders a close button.
`onClose`	`() => void`	—	Called when the close button is pressed.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`children`	`ReactNode`	—	Description text under the title.