# gds-dialog

**Class**: `GdsDialog`

**Tag**: `<gds-dialog>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | `-` | Whether the dialog is open. The state of the dialog can be controlled either by setting this property or by calling the `show()` and `close()` methods. |
| `heading` | `string \| undefined` | `-` | The dialog's heading. |
| `variant` | `'default' \| 'slide-out'` | `-` | The dialog's variant. |
| `placement` | `'initial' \| 'top' \| 'bottom' \| 'left' \| 'right'` | `-` | The dialog's placement. |
| `scrollable` | `boolean` | `-` | Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if the content exceeds the dialog's height, which can be controlled using the `height` property.  This property have no effect if the `dialog` slot is used. In that case, you need to add overflow styles to the content inside the `dialog` slot. |
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. |
| `padding` | `string \| undefined` | `-` | Style Expression Property that controls the `padding` property. Only accepts space tokens. |
| `'padding-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-inline` property. Only accepts space tokens. |
| `'padding-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-block` property. Only accepts space tokens. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `gds-ui-state` | `CustomEvent<any>` | Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing. |
| `gds-close` | `CustomEvent<any>` | Fired when the dialog is closed |
| `gds-show` | `CustomEvent<any>` | Fired when the dialog is opened |


## Slots

| Name | Description |
|------|-------------|
| `(default)` | The content of the dialog |
| `trigger` | The trigger button for the dialog |
| `footer` | The footer of the dialog |
| `dialog` | Complete override of the dialog content, including header and footer |


## Methods

### `show(reason?: string): void`

Opens the dialog.

**Parameters:**

- `reason`: `string` _(optional)_

### `close(reason: string, returnValue: any): void`

Closes the dialog.

**Parameters:**

- `reason`: `string`
- `returnValue`: `any`
