Alert

import { Alert } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
title	string	—	The main heading text for the alert.
description	string (optional)	—	Additional descriptive text shown below the title.
variant	"default" | "destructive" | "warning" | "info" | "success"	"default"	Defines the color scheme and icon style of the alert.
icon	React.ReactNode (optional)	—	Custom icon to display instead of the default variant icon.
hideIcon	boolean (optional)	false	If true, hides the icon completely.
children	React.ReactNode (optional)	—	Custom content rendered inside the alert, below the title/description.
action	{label: string; onClick: () => void} (optional)	—	Defines an action button with a label and click handler.
hideBorder	boolean (optional)	false	If true, hides the border completely.
className	string (optional)	—	Additional Tailwind CSS classes to customize styling.

Usage Examples

Basic Alert

<Alert title="Notice" description="This is an important alert." />

Variants

<>
  <Alert
    variant="default"
    title="Default Alert"
    description="Standard alert message."
  />
  <Alert
    variant="destructive"
    title="Error Alert"
    description="Something went wrong."
  />
  <Alert variant="warning" title="Warning Alert" description="Be cautious." />
  <Alert
    variant="info"
    title="Info Alert"
    description="Informational message."
  />
  <Alert
    variant="success"
    title="Success Alert"
    description="Operation completed successfully."
  />
</>

Custom Icon

import { BadgeCheck } from "lucide-react";

<Alert
  variant="success"
  title="Custom Icon Alert"
  description="This alert uses a custom icon."
  icon={<BadgeCheck size={18} className="text-green-600" />}
/>;

With Custom Content

<Alert title="Custom Icon Alert" description="This alert uses a custom icon.">
  <Button>Button</Button>
</Alert>

With hideIcon

<Alert
  title="Custom Icon Alert"
  description="This alert uses a custom icon."
  hideIcon
/>

With hideBorder

<Alert
  title="Custom Icon Alert"
  description="This alert uses a custom icon."
  hideBorder
/>

With action

<Alert
  title="Custom Icon Alert"
  description="This alert uses a custom icon."
  action={{
    label: "Close",
    onClick: () => {
      console.log("Closed");
    },
  }}
/>

Accessibility

• Icons have semantic meaning and appropriate contrast based on variant.
• The component uses clear headings and descriptive text for screen readers.