# Dialog: Right to left

> Pass `dir` to the content as well, because it renders in a portal outside your RTL container.

Example: https://hextaui.com/docs/dialog/examples/rtl
Component docs: https://hextaui.com/docs/dialog.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dialog-rtl.json
```

This adds `components/examples/dialog/rtl.tsx` with the Dialog component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dialog/rtl.tsx"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function DialogRtl() {
  return (
    <div dir="rtl">
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          تعديل الملف الشخصي
        </DialogTrigger>
        <DialogContent dir="rtl">
          <DialogHeader>
            <DialogTitle>تعديل الملف الشخصي</DialogTitle>
            <DialogDescription>
              قم بإجراء تغييرات على ملفك الشخصي هنا. انقر على حفظ عند الانتهاء.
            </DialogDescription>
          </DialogHeader>
          <DialogBody>
            <FieldGroup>
              <Field>
                <FieldLabel>الاسم</FieldLabel>
                <Input defaultValue="ليلى أحمد" />
              </Field>
              <Field>
                <FieldLabel>اسم المستخدم</FieldLabel>
                <Input defaultValue="@layla" dir="ltr" />
              </Field>
            </FieldGroup>
          </DialogBody>
          <DialogFooter>
            <DialogClose render={<Button variant="outline" />}>
              إلغاء
            </DialogClose>
            <DialogClose render={<Button />}>حفظ التغييرات</DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
```

## Props in this example

### DialogTrigger

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

### DialogContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dir` | `"ltr" \| "rtl"` | – | Set it when the dialog should be right to left. |

### DialogClose

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

## More Dialog examples

- [Form](https://hextaui.com/docs/dialog/examples/form.md)
- [Custom close button](https://hextaui.com/docs/dialog/examples/custom-close-button.md)
- [No close button](https://hextaui.com/docs/dialog/examples/no-close-button.md)
- [Sizes](https://hextaui.com/docs/dialog/examples/sizes.md)
- [Sticky footer](https://hextaui.com/docs/dialog/examples/sticky-footer.md)
- [Scrollable content](https://hextaui.com/docs/dialog/examples/scrollable-content.md)
- [Controlled](https://hextaui.com/docs/dialog/examples/controlled.md)
- [Nested](https://hextaui.com/docs/dialog/examples/nested.md)
- [Detached triggers](https://hextaui.com/docs/dialog/examples/detached-triggers.md)