Dialog

<Flex gap="4">
  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 1</Button>
    </Dialog.Trigger>
    <Dialog.Content size="1">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 2</Button>
    </Dialog.Trigger>
    <Dialog.Content size="2">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 3</Button>
    </Dialog.Trigger>
    <Dialog.Content size="3">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 4</Button>
    </Dialog.Trigger>
    <Dialog.Content size="4">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 5</Button>
    </Dialog.Trigger>
    <Dialog.Content size="5">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Size 6</Button>
    </Dialog.Trigger>
    <Dialog.Content size="6">
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>

  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Fit</Button>
    </Dialog.Trigger>
    <Dialog.Content>
      <Dialog.Header
        title="Edit profile"
        description="Make changes to your profile here. Click save when you’re done."
      />

      <Dialog.Body>
        <Text as="p">
          Three fundamental aspects of typography are legibility, readability,
          and aesthetics. Although in a non-technical sense “legible” and
          “readable” are often used synonymously, typographically they are
          separate but related concepts.
        </Text>
      </Dialog.Body>

      <Dialog.Footer>
        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button color="purple">Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>
</Flex>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content width="500px">
    <Dialog.Header
      title="Custom domain"
      description="Customize the domain used to authenticate users."
    />

    <Dialog.Body>
      <Box>
        <Label mb="1">Auth domain</Label>
        <TextField.Root disabled defaultValue="auth.workos.com" />
      </Box>
    </Dialog.Body>

    <Inset
      p="current"
      side="bottom"
      style={{
        backgroundColor: 'var(--gray-a1)',
        borderTop: '1px solid var(--gray-a4)',
      }}
    >
      <Dialog.Footer>
        <Text size="2" color="gray" mr="auto">
          <Link href="https://example.com" color="gray" highContrast>
            Upgrade to Enterprise
          </Link>{' '}
          to enable this feature
        </Text>

        <Dialog.Close>
          <Button>Cancel</Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button disabled>Save</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Inset>
  </Dialog.Content>
</Dialog.Root>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content size="3">
    <Dialog.Header title="Heading" description="Subtitle" />

    <Dialog.Body>
      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>
    </Dialog.Body>

    <Dialog.Footer>
      <Dialog.Close>
        <Button>Cancel</Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button disabled>Save</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content maxWidth="500px">
    <Dialog.Header
      title="Edit profile"
      description="Make changes to your profile here. Click save when you’re done."
      error="Something went wrong. Try again later."
    />

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

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

    <Dialog.Footer>
      <Dialog.Close>
        <Button>Cancel</Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button color="purple">Save</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content size="3">
    <Dialog.Title>Heading</Dialog.Title>
    <Dialog.Description>Subtitle</Dialog.Description>

    <Box mt="4">
      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p" mb="4">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>

      <Text as="p" mb="4">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense “legible” and “readable”
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>

      <Text as="p" mb="4">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as “the
        quality of being decipherable and recognisable”. For instance, if a “b”
        and an “h”, or a “3” and an “8”, are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>

      <Text as="p">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>
    </Box>

    <Dialog.Footer>
      <Dialog.Close>
        <Button>Cancel</Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button disabled>Save</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header
      title="Edit profile"
      description="Make changes to your profile here. Click save when you're done."
    />

    <Dialog.Body>
      <Heading size="3" mb="2" as="h3">
        With inset
      </Heading>
      <Inset side="x">
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>Device</Table.ColumnHeader>
              <Table.ColumnHeader>Location</Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>iPhone Xs</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>MacBook Pro 15″</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Content>
      </Inset>

      <Heading size="3" mb="2" mt="6" as="h3">
        Without inset and with Table.Root
      </Heading>
      <Table.Root>
        <Table.Content>
          <Table.Header>
            <Table.Row>
              <Table.ColumnHeader>Device</Table.ColumnHeader>
              <Table.ColumnHeader>Location</Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>iPhone Xs</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>MacBook Pro 15″</Table.RowHeader>
              <Table.Cell>Sant Cugat del Vallès, Spain</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Content>
      </Table.Root>
    </Dialog.Body>

    <Dialog.Footer>
      <Dialog.Close>
        <Button>Cancel</Button>
      </Dialog.Close>
      <Dialog.Close>
        <Button color="purple">Save</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

() => {
  const [isOpen, setIsOpen] = React.useState(false);

  const form = useForm({
    resolver: zodResolver(
      z.object({
        email: z
          .string()
          .min(1, 'Email is required')
          .email('Invalid email address'),
      }),
    ),
    defaultValues: { email: '' },
  });

  React.useEffect(() => {
    if (isOpen) {
      form.reset();
      form.clearErrors();
    }
  }, [isOpen, form]);

  const onSubmit = async (data) => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 1000));

      // Simulate server error
      if (data.email === 'taken@example.com') {
        form.setError('root', {
          message: 'This email address is already in use',
        });
        return;
      }

      console.log('Success:', data);
      setIsOpen(false);
    } catch (error) {
      form.setError('root', { message: 'Something went wrong' });
    }
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <Dialog.Trigger>
        <Button>Test error handling</Button>
      </Dialog.Trigger>
      <Dialog.Content size="2">
        <FormProvider {...form}>
          <Dialog.Header
            title="Test form errors"
            description="Try 'taken@example.com' to see a server error"
            error={form.formState.errors.root?.message}
          />

          <Dialog.Body>
            <form
              id="test-error-form"
              noValidate
              onSubmit={form.handleSubmit(onSubmit)}
            >
              <Flex direction="column" gap="4">
                <label>
                  <Text as="div" size="2" mb="2" weight="bold">
                    Email
                  </Text>
                  <TextField.Root
                    placeholder="Enter your email"
                    {...form.register('email')}
                    invalid={!!form.formState.errors.email}
                  />
                  {form.formState.errors.email && (
                    <Text size="2" color="red" mt="2">
                      {form.formState.errors.email.message}
                    </Text>
                  )}
                </label>
              </Flex>
            </form>
          </Dialog.Body>

          <Dialog.Footer>
            <Dialog.Close>
              <Button>Cancel</Button>
            </Dialog.Close>
            <Button
              type="submit"
              form="test-error-form"
              color="purple"
              loading={
                form.formState.isSubmitting || form.formState.isSubmitSuccessful
              }
            >
              Submit
            </Button>
          </Dialog.Footer>
        </FormProvider>
      </Dialog.Content>
    </Dialog.Root>
  );
};

tsx
<Button
  type="submit"
  loading={form.formState.isSubmitting || form.formState.isSubmitSuccessful}
>
  Save changes
</Button>

<Button
  type="submit"
  disabled={!form.formState.isDirty}
  loading={form.formState.isSubmitting}
>
  Save changes
</Button>

React.useEffect(() => {
  if (isOpen) {
    form.reset();
    form.clearErrors();
  }
}, [isOpen, form]);

<Dialog.Content>
  <Dialog.Header
    title="Form title"
    error={form.formState.errors.root?.message}
  />

  <Dialog.Body>
    <form id="my-form" onSubmit={form.handleSubmit(onSubmit)}>
      {/* form fields */}
    </form>
  </Dialog.Body>

  <Dialog.Footer>
    <Button type="submit" form="my-form">
      Submit
    </Button>
  </Dialog.Footer>
</Dialog.Content>

<label>
  <Text as="div" size="2" mb="2" weight="bold">
    Email
  </Text>
  <TextField.Root
    {...form.register('email')}
    placeholder="Enter your email"
    invalid={!!form.formState.errors.email}
  />
  {form.formState.errors.email && (
    <Text size="2" color="red" mt="2">
      {form.formState.errors.email.message}
    </Text>
  )}
</label>

<Controller
  name="email"
  control={form.control}
  render={({ field, fieldState }) => (
    <label>
      <Text as="div" size="2" mb="2" weight="bold">
        Email
      </Text>
      <TextField.Root
        {...field}
        placeholder="Enter your email"
        invalid={!!fieldState.error}
      />
      {fieldState.error && (
        <Text size="2" as="p" color="red" mt="2">
          {fieldState.error.message}
        </Text>
      )}
    </label>
  )}
/>

() => {
  const [isOpen, setIsOpen] = React.useState(false);

  const form = useForm({
    resolver: zodResolver(
      z.object({
        name: z.string().min(1, 'Name is required'),
        email: z.string().min(1, 'Email is required').email('Invalid email'),
      }),
    ),
    defaultValues: { name: '', email: '' },
  });

  // Reset form when dialog opens
  React.useEffect(() => {
    if (isOpen) {
      form.reset();
      form.clearErrors();
    }
  }, [isOpen, form]);

  const onSubmit = async (data) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000));
      console.log('Creating resource:', data);
      setIsOpen(false);
    } catch (error) {
      form.setError('root', { message: 'Failed to create user' });
    }
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
      <Dialog.Trigger>
        <Button>Create user</Button>
      </Dialog.Trigger>
      <Dialog.Content size="2">
        <FormProvider {...form}>
          <Dialog.Header
            title="Create user"
            description="Enter the user's information below"
            error={form.formState.errors.root?.message}
          />

          <Dialog.Body>
            <form
              id="add-resource-form"
              noValidate
              onSubmit={form.handleSubmit(onSubmit)}
            >
              <Flex direction="column" gap="4">
                <Controller
                  name="name"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <label>
                      <Text as="div" size="2" mb="2" weight="bold">
                        Name
                      </Text>
                      <TextField.Root
                        {...field}
                        placeholder="Enter the name"
                        invalid={!!fieldState.error}
                      />
                      {fieldState.error && (
                        <Text size="2" as="p" color="red" mt="2">
                          {fieldState.error.message}
                        </Text>
                      )}
                    </label>
                  )}
                />

                <Controller
                  name="email"
                  control={form.control}
                  render={({ field, fieldState }) => (
                    <label>
                      <Text as="div" size="2" mb="2" weight="bold">
                        Email
                      </Text>
                      <TextField.Root
                        {...field}
                        placeholder="Enter the email"
                        invalid={!!fieldState.error}
                      />
                      {fieldState.error && (
                        <Text size="2" as="p" color="red" mt="2">
                          {fieldState.error.message}
                        </Text>
                      )}
                    </label>
                  )}
                />
              </Flex>
            </form>
          </Dialog.Body>

          <Dialog.Footer>
            <Dialog.Close>
              <Button>Cancel</Button>
            </Dialog.Close>
            <Button
              type="submit"
              form="add-resource-form"
              color="purple"
              loading={
                form.formState.isSubmitting || form.formState.isSubmitSuccessful
              }
            >
              Create user
            </Button>
          </Dialog.Footer>
        </FormProvider>
      </Dialog.Content>
    </Dialog.Root>
  );
};