Alert

Purpose

Alert displays contextual feedback messages with appropriate styling and icons:

• Warning, success, error, info, and muted variants
• Automatic icon selection based on variant
• Support for title and description

When to use

Use Alert for:

• Form validation summaries
• Important notices within a page
• Status messages that persist (not toasts)
• Contextual warnings or tips

Basic usage

import { Alert, AlertTitle, AlertDescription } from '@/shared/ui/components/Alert'

export function FormWarning() {
  return (
    <Alert variant="warning">
      <AlertTitle>Unsaved changes</AlertTitle>
      <AlertDescription>
        You have unsaved changes that will be lost if you leave this page.
      </AlertDescription>
    </Alert>
  )
}

Variants

<Alert variant="info">Informational message</Alert>
<Alert variant="success">Operation completed successfully</Alert>
<Alert variant="warning">Please review before continuing</Alert>
<Alert variant="destructive">An error occurred</Alert>
<Alert variant="muted">Additional context</Alert>

Props

Alert

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'destructive' | 'muted'	'info'	Visual variant
icon	LucideIcon	Auto-selected	Custom icon
hideIcon	boolean	false	Hide the icon
className	string	-	Additional class

AlertTitle

Standard heading props. Renders as <h5>.

AlertDescription

Standard paragraph props. Renders as <p>.

Notes

• Icons are automatically selected based on variant
• Built with class-variance-authority for consistent styling
• Use hideIcon when the context is clear without an icon