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
  4bc6a94a_4613_2b98_0e46_36af8f2f9470["AlertDialogRtl()"]
  b5711db1_d47a_ff8f_68b4_0799a35f13b4["alert-dialog-rtl.tsx"]
  4bc6a94a_4613_2b98_0e46_36af8f2f9470 -->|defined in| b5711db1_d47a_ff8f_68b4_0799a35f13b4
  style 4bc6a94a_4613_2b98_0e46_36af8f2f9470 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/alert-dialog-rtl.tsx lines 75–124

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

  return (
    <div className="flex gap-4" dir={dir}>
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="outline" />}>
          {t.showDialog}
        </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 render={<Button variant="outline" />}>
          {t.showDialogSm}
        </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>
  )
}