104Get started
HextaUI

Alert: Partial content

Title only, description only and no icon all line up without extra classes. The grid places each part in its own column.

Invite sent
Sessions expire after 30 days of inactivity.
No icon
The content starts at the padding.
import { IconCircleCheck, IconInfoCircle } from "@tabler/icons-react"

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

export function AlertPartialContent() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <Alert variant="success">
        <IconCircleCheck />
        <AlertTitle>Invite sent</AlertTitle>
        <AlertClose />
      </Alert>
      <Alert>
        <IconInfoCircle />
        <AlertDescription>
          Sessions expire after 30 days of inactivity.
        </AlertDescription>
      </Alert>
      <Alert>
        <AlertTitle>No icon</AlertTitle>
        <AlertDescription>The content starts at the padding.</AlertDescription>
      </Alert>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-partial-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.

Alert

PropTypeDefault
variantColors the icon. destructive and warning are announced assertively.
"default" | "destructive" | "success" | "info" | "warning""default"

Every prop is in the Alert API reference.

More Alert examples

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

Related components