# Alert: Rich content

> Inline icons and links inside the description keep their own style. Use `render` to give the title a heading level.

Example: https://hextaui.com/docs/alert/examples/rich-content
Component docs: https://hextaui.com/docs/alert.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/alert-rich-content.json
```

This adds `components/examples/alert/rich-content.tsx` with the Alert component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/alert/rich-content.tsx"
import {
  IconExternalLink,
  IconInfoCircle,
  IconTerminal2,
} from "@tabler/icons-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export function AlertRichContent() {
  return (
    <Alert className="max-w-lg">
      <IconInfoCircle />
      <AlertTitle render={<h3 />}>Rendered as an h3</AlertTitle>
      <AlertDescription>
        <p>
          Press <IconTerminal2 className="inline size-4 align-text-bottom" /> to
          open the terminal, or read the <a href="#">docs</a>.
        </p>
        <Button
          variant="outline"
          size="sm"
          nativeButton={false}
          render={<a href="#" />}
        >
          Open guide <IconExternalLink />
        </Button>
      </AlertDescription>
    </Alert>
  )
}
```

## Props in this example

### AlertTitle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

## More Alert examples

- [Variants](https://hextaui.com/docs/alert/examples/variants.md)
- [Soft](https://hextaui.com/docs/alert/examples/soft.md)
- [Partial content](https://hextaui.com/docs/alert/examples/partial-content.md)
- [Actions](https://hextaui.com/docs/alert/examples/actions.md)
- [Dismissible](https://hextaui.com/docs/alert/examples/dismissible.md)
- [Controlled](https://hextaui.com/docs/alert/examples/controlled.md)
- [Cancel a dismiss](https://hextaui.com/docs/alert/examples/cancel-dismiss.md)
- [Inserted after load](https://hextaui.com/docs/alert/examples/inserted.md)
- [Right to left](https://hextaui.com/docs/alert/examples/rtl.md)