The Adaptavist Group LogoDocumentation

Use the Button Macro

Create stylized buttons for hyperlinks to other pages or websites.

The Button macro allows you to create stylized buttons which provide hyperlinks to other pages or websites. These can be added individually anywhere on a page or grouped as a horizontal row of button links using the Button Group macro.

Although hyperlinks can be created through the standard Confluence interface, buttons provide stronger visual integration with the application as a whole and can be used to create pages that feel like part of Confluence itself.

Add a button to your page

  1. Navigate to the page you want to edit.
  2. Select the Edit icon.
  3. Select the position where you want to display your cards.
  4. Type /Button and select the Button macro.
  5. In the button editor:
    1. Select one of the button presets for a quick starting point
    2. Customize your button by changing the button appearance, alignment, and destination for your button.
  6. Select Save.
    A macro placeholder is shown on your page.
  7. Select Publish to see your button in action.
Tip:

If you're adding multiple buttons, consider putting them in a Button Group macro to keep them neatly arranged in a vertical or horizontal group.

Edit your button

  1. To change the macro, click the macro placeholder, then click the Edit icon.
  2. Make your changes, then select Save.

Add a destination to your button

You can use a button to link to a Confluence page on your site or to an external webpage.

Link to a Confluence page on your site

In the button editor select Search Page, then type in the Confluence page field.

The field will search for matching Confluence pages, which you can select from the dropdown. To only see pages from the same space select the check box above the search box.

  1. In the button editor, select Add Link.
  2. Type the full web address in the Enter URL field.
Note:

For security reasons, some browsers may block URL paths that point to files on a local file system or local networked folders. This can be overridden in your browser's security settings but should only be done as part of a comprehensive security strategy. In most cases, it is best to host such files on dedicated web servers that use other protocols, such as FTP.

More information can be found in Atlassian's documentation.

Link a button to a specific place on a page

You can combine the button macro with Confluence's Anchor macro to link to a specific position on a page.

Link to a location on the same page
  1. Add an anchor macro to the page.
  2. Give the anchor macro a name e.g. notes.
  3. Use the name of the anchor macro as the Destination for the button macro. Do this by putting a hashtag before the anchor name e.g. #notes.
Link to a location on a different page
  1. Add an anchor macro to the page.
  2. Give the anchor macro a name e.g. notes.
  3. In the Button macro's Destination field, select the page with your anchor macro, then add the name of the anchor to the end of the URL.

    For example: sitename.domain/wiki/Project+seven#notes

Open a new tab with your button

If you don't want readers to leave the page when they click a button, you can set the system to open a new tab instead.

To do this, select the Open in a New Tab check box.

Change the alignment of your button

There are three alignment options for your button: left, center, and right. You can select these options in the Button editor.

Change the appearance of your button

There are two ways to change the appearance of your button:

  • Use one of the preset button types to change your button style and get a new look, or

  • Design it yourself using the Customization tab

If you use one of the preset options, you can still customize it to suit your needs.

Change your button text

Changing the text on your button is easy. Just select the Button text field and enter the text you need.

If you don't want text, you can choose to have only an icon instead.

Add an icon to your button

You can add an icon or emoji to your button to help show what it is for and to add some personality to your buttons.

  1. To add an icon, select Add icon from the editor.

    This opens the icon and emojis libraries.

  2. Select any icon from the libraries.
    Note:

    You can change an existing icon by selecting the pencil, then selecting a new icon. Select the trash icon to remove it.

Choose a button style

There are four different styles to choose from. Each button style has its own hover state to highlight the button before a user clicks on it. The style options are:

FilledBorderedSubtleLink
Normal
Hover

Change icon position

The icon position parameter lets you choose where the icon will appear.

The options are:

Before After Only

Change your button shape

There are three options for button shape.

Select your choice from the Shape field:

Change your button size

Choose from small, medium, and large button sizes.

Select the Full Width checkbox to make the button fill the full width of its container.

This is a good option when using buttons inside a table or Background macro.

Change your button color

Using color palettes, you can customize the color of the background and text to be exactly what you want.

Select from the options shown. If you don't see the color you want, select the Paint bucket button to open the color picker, then choose any color.

Changing the color palette will change the presented options.

Button Group macro

Used in conjunction with the Button macro, the Button Group macro allows you to create stylized button groups.

You can create a horizontal toolbar-like group of hyperlinks or a vertical page tree-like group.

Add a Button Group macro to your page

  1. Navigate to the page that you want to edit.
  2. Click the Edit icon.
  3. Click Insert → View Morein the Confluence editor.
  4. Select the Button Group macro in the Select Macro screen.
  5. Choose the direction of the buttons from the Button Group Direction dropdown.
    While they can be set to vertical, horizontal is the default.
  6. Choose your preferred Button Group Alignment, left, center, or right. (Left is the default position.)
    A macro placeholder appears.
  7. Insert a Button macro for each button you want to add into the macro placeholder, e.g., add a Button macro for Email, Search, and Edit.
    Buttons are arranged in the order shown within the Button Group macro. You can change the order later by dragging the macro placeholders to the desired positions.
  8. Click Publish to view the Button Group rendered with the button links.
    In the example below, standard, primary, and subtle style buttons were added to the Button Group.
  9. Click the buttons to test the link destinations and behaviors, e.g., if they open in a new tab.

Direction examples

Horizontal arrangement

Vertical arrangement

Edit the macro

To make changes to the macro, click the Button Group macro placeholder, then click Edit.

For example, you may want to add or remove a button or to change the tooltip text.

After you make your changes, they will be saved automatically.

Search documentation

Start typing to search the docs.