DialogContent

DialogContent is part of the Overlays set, imported from @jcsoftdev/ui/overlays.

Import

import { DialogContent } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/dialog.

Usage

export const Default: Story = {
  render: (args) => (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="danger">Anular cita</Button>
      </DialogTrigger>
      <DialogContent {...args}>
        <CancelBody />
      </DialogContent>
    </Dialog>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
width	"md" | "lg"	"md"
blocking	boolean	false	While a mutation is in flight: Escape, outside click and the close button are disabled so half-saved state is not lost.
closeLabel	string	"Close"	Accessible label of the close button.
container	HTMLElement | null		Portal target. Defaults to document.body; pass an element to keep a scoped data-style.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Open By Default
• Large
• Blocking
• Controlled
• In Scoped Container
• In Scoped Preset

Source

packages/ui/src/overlays/dialog/dialog.tsx