[Components](https://oods-foundry.com/components) / primitive

# Dialog

Asks for a decision or shows focused content in a window with a title, actions and a close button.

Generated from @oods/foundry 0.10.1

- Categories

  primitive

- Contexts

  none listed

- Readiness

  `react-and-vue`

## Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example `dialog-confirm` : activate the close button or press Escape, close emitted once; the dialog stays open until open becomes false.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real Dialog, live

React

Vue

Events it emits: close. Use either render above, and each event shows here with the framework that sent it.



## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { Button, Dialog } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <Dialog
      id="archive-workspace"
      open={true}
      modal={false}
      title="Archive workspace"
      description="Members lose access until the workspace is restored."
      size="sm"
      actions={<><Button content="Cancel" /><Button content="Archive workspace" /></>}
    >
      Invoices and subscriptions stay in the archive for 30 days.
    </Dialog>
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `id` | `string \| undefined` | no | `archive-workspace` |
| `open` | `boolean \| undefined` | no | `true` |
| `modal` | `boolean \| undefined` | no | `false` |
| `title` | `ReactNode` | yes | `Archive workspace` |
| `description` | `ReactNode` | no | `Members lose access until the workspace is restored.` |
| `dismissLabel` | `string \| undefined` | no | |
| `size` | `"sm" \| "md" \| "lg" \| undefined` | no | `sm` |
| `actions` | `ReactNode` | no | |

### Slots

default, actions

### Events

close

## States

open, closed

## Accessibility

- Role

  `button`

- How it gets its name

  `aria-label` on `button[aria-label="Close"]`

### Keyboard

Keyboard

| Key | What it does |
| - | - |
| `Tab` | Move focus to the named native control |
| `Enter` | Activate the control |
| `Escape` | Close the dialog |

### Obligations in the contract

- A native dialog element named by its h2 title (aria-labelledby) and described by its description (aria-describedby)
- The close control is a ghost icon button named by dismissLabel (default Close)
- Escape and the close control emit close

The consumer owns open: the close control, Escape and a browser close request emit close, and the dialog stays open until open becomes false. modal (default true) opens it in the browser with showModal(), over a backdrop with the page behind it inert and not scrolling (the page's own overflow and padding come back exactly when it closes, by any route, or unmounts), and a click on the backdrop emits close; modal false shows it in place, which a gallery or a static page uses. Server-rendered and static HTML carry the open attribute while open, and on a static page an inline runtime script makes the close control close it. size sets the largest inline size: sm 400px, md 512px or lg 640px. The default slot is the body; the actions slot (or the actions prop) is the right-aligned footer, and the HTML renderer draws a string or { label, intent } list there as buttons.

## Tokens

The token roles this component reads.

- `dialog.background`
- `dialog.border`
- `dialog.shadow`
- `dialog.backdrop`
- `dialog.title`
- `dialog.description`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | verified | verified |
| visual themes | verified | verified |

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourDialog>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "Dialog",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourDialog>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourDialog>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/dialog/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.Dialog` `sha256:ff9aec80242c…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios dialog-confirm` `sha256:6cef0ce2ebaa…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json Dialog` `sha256:622be6e5138f…`
- **React readiness**: `@oods/components-react@0.10.1 readiness Dialog` `sha256:ba7b1cd5ff50…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness Dialog` `sha256:70cdc54997c5…`
- **Prop types**: `generated/0.10.1/components/prop-types.json Dialog` `sha256:3f93f76916a4…`