# AUI Button

## Description

The AUI provides buttons as well. They are ideal to be used for more prominent links on your page.

The buttons are available in several variations:

| Sample                                                                                                                                                                                                                                   | Button Style | Button Size | Icon | Comment                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- | ---- | ----------------------------------------------------------- |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2Fqaeda35PShuDUooivL4K%2Faui-button-normal-normal.png?alt=media\&token=064a0946-552f-468c-a867-6b1938c97f52)   | Normal       | Normal      |      |                                                             |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FQ41q2Zcl5iKQt7XuhrgZ%2Faui-button-normal-compact.png?alt=media\&token=3a7aee3d-aa28-426e-ba9b-b1b6f5e7b079)  | Normal       | Compact     |      |                                                             |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FwkTHZ8NrQ1VS5xXQVdiN%2Faui-button-primary-normal.png?alt=media\&token=1e21f0de-4e0d-489b-9e26-2713469f7894)  | Primary      | Normal      |      |                                                             |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FPnacZqPZaVDrFjcUHQnR%2Faui-button-primary-compact.png?alt=media\&token=605df237-ce19-4a6d-8af2-9a873f404a92) | Primary      | Compact     |      |                                                             |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FQMuihumYzIzoNtxQxU3u%2Faui-button-subtle-normal.png?alt=media\&token=87b16602-ca97-4106-a04f-fc0b9c58b380)   | Subtle       | Normal      |      | In Confluence, the button shape shows on mouse-over.        |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FATiVbyrkcELI3MErE5Pz%2Faui-button-subtle-compact.png?alt=media\&token=859a2ac9-f7a2-432b-b45e-b826356177b3)  | Subtle       | Compact     |      | In Confluence, the button shape shows on mouse-over.        |
| ![](https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2F41383rHTHE8cVec7qXeH%2Fimage2017-11-15_20-30-53.png?alt=media\&token=78110bc9-114d-4529-ac88-8b3209470975)   | Primary      | Normal      | like | Any of the above can be combined with one of the AUI icons. |

## Adding the Macro

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

## Macro Options

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FUF7snF4H2Fv8U779pg9N%2Fimage2017-11-15_20-20-50-768x468.png?alt=media&#x26;token=317ac24e-f4fb-40b6-b12c-415f02231936" alt=""><figcaption></figcaption></figure>

### **Title**

Enter the title of the button here.

### **Button Style**

Select the style of the button.

### **Button Size**

Select the size of the button here.

### **Button Link**

Enter the full URL here that the button shall link to.

### **Link Relation**

Select the link relation here or leave empty if not sure.

### **Link Target**

Select the link target here or leave empty if not sure.

### **Button Icon**

Check this switch if you want to use an icon in the button.

### **Icon**

Select the icon. This only has an effect if “Button Icon” is checked.