Dialog

Modal dialog window displayed above the page.
betaView sourceRadix ThemesReka UI
vue
<script setup lang="ts">
import {
  Button,
  DialogRoot,
  DialogTrigger,
  DialogPopup,
  DialogTitle,
  DialogClose,
  DialogDescription,
  DialogCloseButton,
  TextField,
} from '@typlog/ui'
</script>

<template>
  <DialogRoot>
    <Button :as="DialogTrigger">Edit profile</Button>
    <DialogPopup class="p-0">
      <div class="p-4">
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>Make changes to your profile.</DialogDescription>
      </div>
      <div class="flex flex-col gap-3 p-4 pb-8">
        <label>
          <span class="block text-sm font-semibold mb-1">Name</span>
          <TextField model-value="Freja Johnsen" placeholder="Enter your full name" />
        </label>
        <label>
          <span class="block text-sm font-semibold mb-1">Email</span>
          <TextField model-value="[email protected]" placeholder="Enter your email" />
        </label>
      </div>
      <div class="flex p-4 justify-end gap-3 bg-gray-3">
        <Button variant="classic" color="gray" :as="DialogClose">Cancel</Button>
        <Button>Save</Button>
      </div>
      <DialogCloseButton />
    </DialogPopup>
  </DialogRoot>
</template>

API Reference ​

DialogRoot & AlertDialogRoot ​

Contains all the parts of a dialog.

PropDefaultType
defaultOpen
–
boolean

The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

open
–
boolean

The controlled open state of the dialog. Can be binded as v-model:open.

DialogTrigger & AlertDialogTrigger ​

Wraps the control that will open the dialog. Usually used with Button:

vue
<template>
<DialogRoot>
  <DialogTrigger as-child>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogPopup>...</DialogPopup>
</DialogRoot>
</template>

DialogPopup ​

PropDefaultType
size"1"
"1""2""3""4""5"

Control size of the dialog. It will affect the padding and border-radius.

AlertDialogPopup ​

DialogTitle & AlertDialogTitle ​

DialogDescription & AlertDialogDescription ​

DialogCloseButton & AlertDialogCancelButton ​

A cross icon to close the dialog.

PropDefaultType
as"button"
AsTagComponent

The element or component this component should render as.

asChild
–
boolean
color
–
Color

Overrides the accent color inherited from the ThemeProvider.

disabled
–
boolean

Mark the button as disabled.

highContrast
–
boolean

Uses a higher contrast color for the component.

radius
–
"none""small""medium""large""full"

Overrides the radius inherited from the ThemeProvider.

size"2"
"1""2""3""4"

Control the size of the button.

tooltip
–
string
variant"solid"
Enum

The visual variant to apply.

DialogClose & AlertDialogCancel ​

Reka UI's native DialogClose component without any styles. Usually used with Button:

vue
<template>
  <DialogRoot>
    <DialogPopup>
      <Button :as="DialogClose">Close</Button>
    </DialogPopup>
  </DialogRoot>
</template>

AlertDialogAction ​

Examples ​

Size ​

Use the size prop to control size of the dialog. It will affect the padding, border-radius and max-width of the popup.

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  Button,
  DialogRoot,
  DialogTrigger,
  DialogPopup,
} from '@typlog/ui'

type PopupSize = '1' | '2' | '3' | '4' | '5'

const size = ref<PopupSize>('1')
</script>

<template>
  <DialogRoot>
    <div class="flex items-center gap-4">
      <Button :as="DialogTrigger" variant="soft" @click="size='1'">Size 1</Button>
      <Button :as="DialogTrigger" variant="soft" @click="size='2'">Size 2</Button>
      <Button :as="DialogTrigger" variant="soft" @click="size='3'">Size 3</Button>
      <Button :as="DialogTrigger" variant="soft" @click="size='4'">Size 4</Button>
      <Button :as="DialogTrigger" variant="soft" @click="size='5'">Size 5</Button>
    </div>
    <DialogPopup :size="size">
      <p>The quick brown fox jumps over the lazy dog.</p>
    </DialogPopup>
  </DialogRoot>
</template>

Alert Dialog ​

For alert-style dialogs, use the alert-specific components:

AlertDialogRoot, AlertDialogTrigger, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction.

vue
<script setup lang="ts">
import {
  Button,
  AlertDialogRoot,
  AlertDialogTrigger,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogCancel,
  AlertDialogAction,
} from '@typlog/ui'
</script>

<template>
  <AlertDialogRoot>
    <Button color="red" :as="AlertDialogTrigger">Revoke access</Button>
    <AlertDialogPopup>
      <AlertDialogTitle>Revoke access</AlertDialogTitle>
      <AlertDialogDescription>
        Are you sure? This application will no longer be accessible and any existing sessions will be expired.
      </AlertDialogDescription>
      <div class="flex mt-8 justify-end gap-3">
        <Button variant="soft" color="gray" :as="AlertDialogCancel">Cancel</Button>
        <Button color="red" :as="AlertDialogAction">Revoke access</Button>
      </div>
    </AlertDialogPopup>
  </AlertDialogRoot>
</template>