Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Alert

Displays important information with optional icon and multiple variants

## Example​

    import { Terminal } from "lucide-react"

    import {
      Alert,
      AlertDescription,
      AlertTitle,
    } from "@databricks/appkit-ui/react"

    export default function AlertExample() {
      return (
        <Alert>
          <Terminal className="h-4 w-4" />
          <AlertTitle>Example</AlertTitle>
          <AlertDescription>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </AlertDescription>
        </Alert>
      )
    }

## Alert​

Displays important information with optional icon and multiple variants

Source: `packages/appkit-ui/src/react/ui/alert.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`variant` | `"default" | "destructive" | null` |  | - | -

### Usage​

    import { Alert } from '@databricks/appkit-ui';

    <Alert /* props */ />

## AlertDescription​

Descriptive text content for an alert component

Source: `packages/appkit-ui/src/react/ui/alert.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { AlertDescription } from '@databricks/appkit-ui';

    <AlertDescription /* props */ />

## AlertTitle​

Title text for an alert component

Source: `packages/appkit-ui/src/react/ui/alert.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

    import { AlertTitle } from '@databricks/appkit-ui';

    <AlertTitle /* props */ />