104Get started
HextaUI

Alert: Right to left

The icon, content and close button mirror with the reading direction.

import { IconAlertTriangle } from "@tabler/icons-react"

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

export function AlertRtl() {
  return (
    <div dir="rtl" className="w-full max-w-lg">
      <Alert variant="warning">
        <IconAlertTriangle />
        <AlertTitle>تنتهي الفترة التجريبية خلال 3 أيام</AlertTitle>
        <AlertDescription>
          أضف طريقة دفع لإبقاء مساحة العمل نشطة.
        </AlertDescription>
        <AlertClose />
      </Alert>
    </div>
  )
}

Add this example

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

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