#Alert

Display important messages with contextual styling for different severity levels.

#When to Use

• For status messages after an action
• To highlight important information, warnings, or errors
• For persistent notification banners

#Import

import { Alert } from "orizon";

#Examples

#Types

<Alert message="Success alert" type="success" />
<Alert message="Info alert" type="info" />
<Alert message="Warning alert" type="warning" />
<Alert message="Error alert" type="error" />

#With Description

<Alert
  message="Success Tips"
  description="Detailed description for the success state."
  type="success"
  showIcon
/>

#Closable

<Alert message="Closable alert" type="warning" closable
  onClose={() => console.log("closed")}
/>

#With Icon

<Alert message="Success" type="success" showIcon />

#Banner

<Alert message="This is a banner alert" type="warning" banner />

#API

#AlertProps

• type — "success" | "info" | "warning" | "error" — Alert type (default: "info")
• message — ReactNode — Alert title/message
• description — ReactNode — Additional description text
• closable — boolean — Show close button (default: false)
• showIcon — boolean — Show type icon (default: false)
• icon — ReactNode — Custom icon
• action — ReactNode — Action area (e.g., button)
• banner — boolean — Banner mode, no border (default: false)
• onClose — (e: MouseEvent) => void — Close callback
• afterClose — () => void — Called after close animation