---
title: Dialog
description: Dialog element api.
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

<CodeSnippetMD imagePath="/src/assets/generated/dialog-example.png"  imageWidth="200" imageHeight="100"  imageAlt='dialog example'>

```slint playground
import { StandardButton, Button } from "std-widgets.slint";
export component Example inherits Dialog {
    Text {
      text: "This is a dialog box";
    }
    StandardButton { kind: ok; }
    StandardButton { kind: cancel; }
    Button {
      text: "More Info";
      dialog-button-role: action;
    }
}
```
</CodeSnippetMD>

Dialog can be used in place of <Link type="Window"/>, but it has buttons that are automatically laid out.

A Dialog should have one main element as child, that isn't a button.
The dialog can have any number of `StandardButton` widgets or other buttons
with the `dialog-button-role` property.
The buttons will be placed in an order that depends on the target platform at run-time.

The `kind` property of the `StandardButton`s and the `dialog-button-role` properties need to be set to a constant value, it can't be an arbitrary variable expression.
There can't be several `StandardButton`s of the same kind.

A callback `<kind>_clicked` is automatically added for each `StandardButton` which doesn't have an explicit
callback handler, so it can be handled from the native code: For example if there is a button of kind `cancel`,
a `cancel_clicked` callback will be added.
Each of these automatically-generated callbacks is an alias for the `clicked` callback of the associated `StandardButton`.

## Properties

Same as <Link type="Window"/>.

## Functions

Same as <Link type="Window"/>.
