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="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>
    </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>