# Alert

Displays important information with optional icon and multiple variants

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#alert-1 "Direct link to Alert")

Displays important information with optional icon and multiple variants

**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx)

### Props[​](#props "Direct link to Props")

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

### Usage[​](#usage "Direct link to Usage")

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

<Alert /* props */ />

```

## AlertDescription[​](#alertdescription "Direct link to AlertDescription")

Descriptive text content for an alert component

**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

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

<AlertDescription /* props */ />

```

## AlertTitle[​](#alerttitle "Direct link to AlertTitle")

Title text for an alert component

**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

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

<AlertTitle /* props */ />

```