# DialogContent

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

Source: https://ui.jcsoftdev.com/docs/components/dialog-content

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

## Import

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

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

## Usage

```tsx
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](/storybook/?path=/story/overlays-dialog--default)
- [Open By Default](/storybook/?path=/story/overlays-dialog--open-by-default)
- [Large](/storybook/?path=/story/overlays-dialog--large)
- [Blocking](/storybook/?path=/story/overlays-dialog--blocking)
- [Controlled](/storybook/?path=/story/overlays-dialog--controlled)
- [In Scoped Container](/storybook/?path=/story/overlays-dialog--in-scoped-container)
- [In Scoped Preset](/storybook/?path=/story/overlays-dialog--in-scoped-preset)

## Source

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