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.

Error

Your session has expired. Please log in again.

<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>