AlertDialogRtl() — ui Function Reference

Architecture documentation for the AlertDialogRtl() function in alert-dialog-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AlertDialogRtl() — ui Function Reference

Dependency Diagram

graph TD
  32d1bbfe_13d4_e993_861a_577eed81668c["AlertDialogRtl()"]
  bfd4e3b0_6d6b_a2a0_7b01_0ac97e3b501d["alert-dialog-rtl.tsx"]
  32d1bbfe_13d4_e993_861a_577eed81668c -->|defined in| bfd4e3b0_6d6b_a2a0_7b01_0ac97e3b501d
  style 32d1bbfe_13d4_e993_861a_577eed81668c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/alert-dialog-rtl.tsx lines 76–125

export function AlertDialogRtl() {
  const { dir, t, language } = useTranslation(translations, "ar")

  return (
    <div className="flex gap-4" dir={dir}>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">{t.showDialog}</Button>
        </AlertDialogTrigger>
        <AlertDialogContent
          dir={dir}
          data-lang={dir === "rtl" ? language : undefined}
        >
          <AlertDialogHeader>
            <AlertDialogTitle>{t.title}</AlertDialogTitle>
            <AlertDialogDescription>{t.description}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t.cancel}</AlertDialogCancel>
            <AlertDialogAction>{t.continue}</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="outline">{t.showDialogSm}</Button>
        </AlertDialogTrigger>
        <AlertDialogContent
          size="sm"
          dir={dir}
          data-lang={dir === "rtl" ? language : undefined}
        >
          <AlertDialogHeader>
            <AlertDialogMedia>
              <BluetoothIcon />
            </AlertDialogMedia>
            <AlertDialogTitle>{t.smallTitle}</AlertDialogTitle>
            <AlertDialogDescription>
              {t.smallDescription}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t.dontAllow}</AlertDialogCancel>
            <AlertDialogAction>{t.allow}</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}