OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Dialog

Displays a modal window above the page contents.

 <Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content maxWidth="500px">
    <Dialog.Title>Edit profile</Dialog.Title>
    <Dialog.Description mb="4">
      Make changes to your profile here. Click save when you’re done.
    </Dialog.Description>

    <Flex direction="column" gap="4" mb="5">
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Name
        </Text>
        <TextField.Root
          defaultValue="Jane Doe"
          placeholder="Enter your full name"
        />
      </label>

      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Email
        </Text>
        <TextField.Root
          defaultValue="jane@foo-corp.com"
          placeholder="Enter your email"
        />
      </label>
    </Flex>

    <Flex gap="3" justify="end">
      <Dialog.Close>
        <Button>Cancel</Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button color="purple">Save</Button>
      </Dialog.Close>
    </Flex>
  </Dialog.Content>
</Dialog.Root>

API Reference

This component inherits parts and props from the Radix Dialog primitive. View source

Root

Contains all the parts of a dialog.

Trigger

Wraps the control that will open the dialog.

Content

Contains content to be rendered in the open dialog. This component is based on the div element.

Title

An accessible title that is announced when the dialog is opened. This part is based on the Heading component with a pre-defined font size and leading trim on top.

Description

An optional accessible description that is announced when the dialog is opened. This part is based on the Text component with a pre-defined font size.

If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to Dialog.Content.

Close

Wraps the control that will close the dialog.

Examples

With Inset

Use the Inset component to create a container that ignores the Content part padding. If needed, you can recreate the original padding by setting the Inset part’s padding props to "current".

 <Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Custom domain</Dialog.Title>
    <Dialog.Description mb="4">
      Customize the domain used to authenticate users.
    </Dialog.Description>

    <Box mb="5">
      <label>
        <Text as="div" size="2" mb="1" weight="bold">
          Auth domain
        </Text>
        <TextField.Root defaultValue="auth.workos.com" state="disabled" />
      </label>
    </Box>

    <Inset
      p="current"
      side="bottom"
      style={{
        backgroundColor: 'var(--gray-a1)',
        borderTop: '1px solid var(--gray-a4)',
      }}
    >
      <Flex align="center" gap="3" justify="between">
        <Text size="2" color="gray">
          <Link href="https://example.com" color="gray" highContrast>
            Upgrade to Enterprise
          </Link>{' '}
          to enable this feature
        </Text>
        <Flex gap="3" justify="end">
          <Dialog.Close>
            <Button>Cancel</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button disabled>Save</Button>
          </Dialog.Close>
        </Flex>
      </Flex>
    </Inset>
  </Dialog.Content>
</Dialog.Root>