Alert

Contextual notification banners with 5 variants: default, info, success, warning, and destructive.

Import

import { Alert, AlertTitle, AlertDescription } from "poyraz-ui/molecules";

All Variants

Each variant has a distinct color to convey meaning.

Default
General information for the user.
Info
Your account has been updated with new permissions.
Success
Your changes have been saved successfully.
Warning
Your free trial is expiring in 3 days.
<Alert>
  <AlertTitle>Default</AlertTitle>
  <AlertDescription>General information.</AlertDescription>
</Alert>

<Alert variant="info">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>Your account has been updated.</AlertDescription>
</Alert>

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Changes saved successfully.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your trial is expiring soon.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Session expired. Log in again.</AlertDescription>
</Alert>

Appearance and Motion

Status role is independent from surface, radius and entrance motion.

Glass information
Semantic color with translucent elevation.
Published
The release is now available.
Review required
Check the migration notes before continuing.
<Alert variant="info" appearance="glass" radius="xl" motion="scale" />
<Alert variant="success" appearance="filled" />
<Alert variant="warning" appearance="inline" dismissible />
pnpm dlx shadcn@latest add @poyraz/alert

Runtime dependencies

class-variance-authority@^0.7.1, lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/molecules/alert.tsx