Alert

Feedback

A tonal feedback surface for information, success, warning or danger.

Live preview

Heads up

A short supporting message with useful context.

Saved

Your changes are live.

Something went wrong

Check the form and try again.

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Alert } from "@nphuonha/ui-kit";
import { CheckCircleIcon, InfoIcon, WarningIcon } from "@phosphor-icons/react";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Alert variant="success" title="Saved">
  Your changes are live.
</Alert>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
variant	"neutral" \| "info" \| "success" \| "warning" \| "danger"	"neutral"	Tone of the alert.
title	string	—	Bold heading.
icon	IconComponent	—	Optional leading icon.
children	ReactNode	—	Supporting message.