> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert

> Status message surface with title, description, icon, and children

# Alert

`Alert` renders a bordered status message. It can be a leaf component or a container with child nodes.

```lua theme={"dark"}
ui.alert({
  title = 'Interactive State',
  description = 'Change values here and the preview updates.',
  iconComponent = 'lucide:info'
})
```

```lua theme={"dark"}
ui.alert({
  title = 'Warning',
  variant = 'destructive'
}, function()
  ui.text('This action cannot be undone.')
end)
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.alert(props, children?)
  ```

  ```lua Declarative theme={"dark"}
  lui.alert(props, children?)
  ```
</CodeGroup>

## Props

| Prop                                | Type                         | Description                                      |
| ----------------------------------- | ---------------------------- | ------------------------------------------------ |
| `title`                             | `string`                     | Optional heading.                                |
| `description`                       | `string`                     | Optional description text.                       |
| `variant`                           | `'default' \| 'destructive'` | Destructive switches to red border/text styling. |
| `icon`, `iconComponent`             | icon                         | Optional leading icon.                           |
| `innerClassName`                    | `string`                     | Inner wrapper class.                             |
| `bodyClassName`, `contentClassName` | `string`                     | Body/content wrapper class.                      |
| `titleClassName`                    | `string`                     | Title class.                                     |
| `descriptionClassName`              | `string`                     | Description class.                               |
| `className`, `style`                | mixed                        | Common LUI styling props.                        |