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
Navigate to the page you want to edit.
Click the Edit icon.
Click Insert > View More in the Confluence editor, then select the Button macro in the Select Macro screen. (Alternatively, use
/
and begin to typebutton
to access the macro via the quick insert menu.)The Insert Button Macro screen appears. Customize it according to your needs:
Parameter Description Required Notes Button Text The text displayed on the button. 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.
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 Tab Select if you want the button to open the URL in a new tab. Alignment Select the alignment option for your button. The options are Left, Centre, or Right.
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.
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.
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.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.The appearance of the color picker will depend on which browser you are using.
Icon Select an icon from a preset option list or leave it to None. Click Save. A macro placeholder is displayed on the page.
Click Publish to view the rendered button on the page.
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
- Add an anchor macro to the page.
- Give the anchor macro a name eg. notes.
- 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
- Add an anchor macro to the page.
- Give the anchor macro a name eg. notes.
- 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
Navigate to the page that you want to edit.
Click the Edit icon.
Click Insert > View More in the Confluence editor.
Select the Button Group macro in the Select Macro screen.
Choose the direction of the buttons from the Button Group Direction dropdown. They can be Vertical or Horizontal. The default is horizontal.
Choose your preferred Button Group Alignment. They can be Left, Centre, or Right. The default is Left.
A macro placeholder is displayed.
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.
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.
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.