styple

Dialog

A modal overlaying the page or another dialog, rendering the content underneath inert.

Example

import { Dialog, DialogTrigger, DialogContent, DialogDescription, DialogClose } from "@styple/design-system";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent
    headerTitle={<Heading as="h4">Example Heading</Heading>}
    footerContent={<DialogClose asChild><Button transparent variant="success" css={{ ml: "auto" }}>Close sheet</Button></DialogClose>}
  >
    <DialogDescription asChild>
      <Text id="dialog-desc" css={{ lineHeight: "25px" }}>Here is some lorem ipsum example description text.</Text>
    </DialogDescription>
  </DialogContent>
</Dialog>

API Reference

See Radix-UI Dialog (v0.1.7) for details. This only covers styple abstractions.

Dialog

A styled component wrapper for Dialog.Root.

DialogContent

A styled abstraction combining Dialog.Portal, Dialog.Overlay and Dialog.Content. With custom props:

Prop	Type	Default	Explanation
`headerTitle`	`Heading`	-	Dialog title as a sticky `Dialog.Title` with `Dialog.Close`.
`footerContent?`	`ReactNode`	-	Bottom-fixed Dialog footer.

Others

Besides above the following component wrappers are exported: DialogTrigger, DialogClose, DialogDescription. See example and Radix docs for use-cases.

Container

DropdownMenu