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.

Instructions

  1. Navigate to the page you want to edit.

  2. Click the Edit icon.

  3. Click Insert > View More in the Confluence editor, then select the Button macro in the Select Macro screen. (Alternatively, use / and begin to type button to access the macro via the quick insert menu.)

  4. The Insert Button Macro screen appears. Customize it according to your needs:

    ParameterDescriptionRequiredNotes
    Button TextThe text displayed on the button.

    (tick)


    Destination

    Using these controls, you can choose where the button will send people. There are two main options:

    Link to a Confluence page on your site

    Select Search Page, then type in the Confluence page field. The field will search for matching Confluence pages, which you can then select from the drop-down. To only see pages from the same space select the check box above the search box. 

    Link to a URL

    Select Add Link, then type the full web address in the Enter URL field.

    (tick)


    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.

    Open in New TabSelect if you want the button to open the URL in a new tab.

    (error)


    Alignment

    Select the alignment option for your button. The options are Left, Centre, or Right.

    (error)

    If the button is inside a Button Group, it follows the alignment of the Button Group.

    Button Type

    Select the type of button to be displayed: Standard, Primary, or Subtle. The effect on these buttons differs depending on if they are on their own or a part of a Button Group.

    If you select the standard button type, you can choose a color for the button's background. The default color is white. Click on the pencil to open your browser's color picker. The text in the button will automatically change to a contrasting color for clarity.

    (tick)
    Color Palettes

    Changing the color palette will change the presented options for Background Color.

    The options are:-
    Default - The options are a standard selection of colors that do not change. There are different options for the background and text colors.

    Recently used - The options offered will be the last seven colors you have used in any of our macros. 

    Local Space  - The options offered in this palette are specific to the space. The Space Admin can create and edit this palette. This may be used for your team's colors of choice.

    Organization - This palette offers the same options in every space. Confluence Admins can create and edit this palette. This may be used for your organization's brand colors.

    (error)Only shown if standard button type selected.

    If you have not yet saved a macro, there will be no color options in the recently used palette.
    Background Color

    Choose the background color for the Button.

    You can select from one of the options shown. If you don't see the color you want, select the Paint bucket button: to open a color picker and choose any color.

    (error)

    The appearance of the color picker will depend on which browser you are using.


    Text Color

    Choose the text color for the Button.

    You can select from one of the options shown. If you don't see the color you want, select the Paint bucket button: to open a color picker and choose any color.

    (error)

    The appearance of the color picker will depend on which browser you are using.


    IconSelect an icon from a preset option list or leave it to None.(error)
  5. Click Save. A macro placeholder is displayed on the page.

  6. Click Publish to view the rendered button on the page.

  7. Click a button to test the link destination and behavior, e.g. if it opens in a new tab.

Edit the macro

To change the macro parameters, click the macro placeholder, then click the Edit icon. Make the required changes, then click Save.

Button Styles

  • Standard: 

  • Primary:

  • Subtle: 

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 point 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 eg. notes.
  3. Use the name of the anchor macro as the Destination for the button macro. Do this by putting #name. eg #notes.

Link to a location on a different page

  1. Add an anchor macro to the page.
  2. Give the anchor macro a name eg. notes.
  3. In the Destination field of the button macro, select the page with your anchor macro. Then add the name of the anchor to the end of the URL.
    eg.  sitename.domain/wiki/Project+seven#notes


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.

Instructions

  1. Navigate to the page that you want to edit.

  2. Click the Edit icon.

  3. Click Insert > View More in 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. They can be Vertical or Horizontal. The default is horizontal.

  6. Choose your preferred Button Group Alignment. They can be Left, Centre, or Right. The default is Left

  7. A macro placeholder is displayed.

  8. 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.

  9. 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.

  10. Click the buttons to test the link destinations and behaviors, e.g. if they open in a new tab.

Direction Examples

Horizontal Direction

Vertical Arrangement

Edit the macro

To make changes to the macro, for example, to add or remove a button or to change the tooltip text, click the Button Group macro placeholder then click the Edit icon. Make the required changes, the changes save automatically.

On this page