Alert: Rich content

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

Rendered as an h3

Press to open the terminal, or read the docs.

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>
  )
}

Add this example

This adds the example as components/examples/alert/rich-content.tsx, together with the Alert component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-rich-content.json

To add only the component, follow the Alert installation.

Props in this example

The Alert props this example sets, from the API reference.

AlertTitle

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

Every prop is in the Alert API reference.

More Alert examples

See them all, with keyboard support and accessibility notes, on the Alert page.