Atlassian Confluence

Atlassian Confluence Look & Feel Tricks: Creating Buttons

 

Want an easy way to create buttons in Confluence? 

Check out  Handy Macros for Confluence. Сomes with reminders, customizable interactive statuses, galleries and carousels with images or videos, and more.

 

If you have read previous Look&Feel tricks, you know that Confluence appearance is way more flexible than it seems to be. In this post we’re going to explore how the Atlassian User Interface (AUI) library can help with improving Confluence usability.

AUI allows you to do a lot of things, but for now we will focus on buttons. Buttons are a cool way to make links more visible on Confluence pages. Atlassian doesn’t recommend to use buttons as links, however, as we will see further, sometimes you can deviate from this rule.

Let’s see an example of how buttons can be used. On the home page of our Documentation Confluence we have several icons of our products. We wanted to place a link that would take users to the support request form in case they don’t know how to proceed or need more information.

Since we wanted to make this link easier to find on the page, we thought it would make sense to put a button, because, first it would be easier to find the link on the page. And second, the button would be in line with the product icons.

button

So, how exactly can you place a button? We created a user macro called aui-button in Confluence Admin – User Macros with the following code:

## Macro title: AUI Button
## Macro has a body: N
## @param Title:title=Title|type=string|required=true
## @param URL:title=URL|type=string|required=true
<a href="$paramURL">
    <button class="aui-button aui-button-primary">
        $paramTitle
    </button>
</a>

Then we saved the macro and made sure it appeared in the macro list.

macro

Our macro is now available in the macro browser (Insert More Content – Other Macros), so we can insert it to any page and set its name and URL.

link

If you want to test your ideas without making a mess of your production system, have a look at AUI Sandbox where you can see sample code for other kinds of buttons (for example, drop-down button) and play around with it.

For example, to add a small question mark icon to the Get Help button, it’s enough to take the default code for the icon button and replace the default code with the following:


    <button class="aui-button">
        <span class="aui-icon aui-icon-small aui-iconfont-help">
            Help
        </span>
        <span>
            Icon button
        </span>
    </button>

You can immediately see the result of your experiments in the Preview pane in Sandbox:

aui

Follow us on Twitter and Facebook to stay tuned for future hints and tricks.

Recommended Articles