# AUI Dialog

## Description

The AUI Dialog is used to guide you through certain actions in Confluence.

The idea of offering it as a page macro is to notify your visitors of certain secondary information after clicking on a button, showing it in such a dialog.

The macro will add a button that your visitors can click to show the dialog. The upper right “X” and the Close button will close the dialog.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FeFYkK1li6ck9xWazwk9e%2Fimage2017-11-12_20-52-38-768x298.png?alt=media&#x26;token=9f4f5e2c-ab5b-45de-9075-4ffbba7940a0" alt=""><figcaption></figcaption></figure>

## Adding the Macro

1. Edit your page.
2. Select “+” => Other macros
3. Type in “aui” in the Search box
4. Select the “AUI Dialog” macro

## Macro Options

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FzNYlp9PISzk7wABjDTsY%2Fimage2017-11-12_21-18-11-768x470.png?alt=media&#x26;token=9341b409-7104-49ae-b66c-f0e4651c21b6" alt=""><figcaption></figcaption></figure>

### **Dialog ID**

Enter an ID here that is unique on your page.

### **Button Title**

Enter the title of the button here that will open the dialog.

### **Button Primary**

With this option enabled, the button will be displayed in the primay color (usually blue).

### **Dialog TItle**

Enter the title of the dialog here.

### **Dialog Footer**

Enter a text here that will be shown in small text in the left footer area of the dialog.

### **Dialog Size**

Select the dialog size here:

* small
* medium
* large
* xlarge

### **Warning Dialog**

With this option enabled, the dialog will be displayed woth e red header.

### Body

Use the body of this macro to enter the content of the dialog.

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FUr2An8stZkN5W9oJG0pQ%2Fimage2017-11-12_21-21-45-768x124.png?alt=media&#x26;token=4d2918fd-709d-4cbe-8bf2-828a3482c3f7" alt=""><figcaption></figcaption></figure>
