## Overview [#overview] The **Alert** component displays important messages to users in a visually distinct way, supporting different severity levels with appropriate styling, iconography, and accessible markup to communicate the urgency and nature of the message effectively. ## Usage [#usage] ```tsx showLineNumbers import { Alert, AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx showLineNumbers Heads up! You can add components and dependencies to your app using the cli. ``` ## Examples [#examples] ### Default [#default] ```tsx import { Alert, AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; import { Terminal } from "@tilt-legal/cubitt-icons/ui/outline"; Heads up! You can add components and dependencies to your app using the CLI. ; ``` ### Info [#info] ```tsx import { Alert } from "@tilt-legal/cubitt-components/primitives"; import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; import { CircleInfo } from "@tilt-legal/cubitt-icons/ui/outline"; New features available We've added new components to the library. Check out the latest documentation for details. ; ``` ### Destructive [#destructive] ```tsx import { Alert } from "@tilt-legal/cubitt-components/primitives"; import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; import { CircleXmark } from "@tilt-legal/cubitt-icons/ui/outline"; Unable to process your payment Please verify your billing information and try again. ; ``` ### Warning [#warning] ```tsx import { Alert } from "@tilt-legal/cubitt-components/primitives"; import { AlertDescription, AlertTitle } from "@tilt-legal/cubitt-components/primitives"; import { TriangleWarning } from "@tilt-legal/cubitt-icons/ui/outline"; Storage space running low You're using 85% of your available storage. Consider upgrading your plan or deleting unused files. ; ``` ### Success [#success] ```tsx import { Alert } from "@tilt-legal/cubitt-components/primitives"; import { CircleCheck } from "@tilt-legal/cubitt-icons/ui/outline"; Successfully deployed Your application has been deployed to production. All systems are running normally. ; ``` ## Props [#props] ### Alert [#alert] | Prop | Type | Default | Description | | ----------- | ---------------------------------------------------------------- | ----------- | -------------------------------------------- | | `variant` | `"default" \| "destructive" \| "info" \| "warning" \| "success"` | `"default"` | The visual style variant of the alert | | `className` | `string` | - | Additional CSS classes to apply to the alert | | `children` | `React.ReactNode` | - | The content to display inside the alert | | `...props` | `React.ComponentProps<"div">` | - | All other standard div HTML attributes | ### AlertTitle [#alerttitle] | Prop | Type | Default | Description | | ----------- | ----------------------------- | ------- | -------------------------------------------- | | `className` | `string` | - | Additional CSS classes to apply to the title | | `children` | `React.ReactNode` | - | The title text content | | `...props` | `React.ComponentProps<"div">` | - | All other standard div HTML attributes | ### AlertDescription [#alertdescription] | Prop | Type | Default | Description | | ----------- | ----------------------------- | ------- | -------------------------------------------------- | | `className` | `string` | - | Additional CSS classes to apply to the description | | `children` | `React.ReactNode` | - | The description text content | | `...props` | `React.ComponentProps<"div">` | - | All other standard div HTML attributes | *** ## Design Guidelines [#design-guidelines] ### Variant Usage [#variant-usage] * **Default**: General informational messages, neutral tone * **Info**: Helpful information, tips, or feature announcements * **Warning**: Important information that requires attention but isn't critical * **Destructive**: Error messages, failed operations, or critical issues * **Success**: Confirmation messages, successful operations, or positive feedback