Buttons
...
Adding a button to the page gives it a more eye-popping appeal since they usually have the highest emphasis on the web (or any other) page. But there's more to it than meets the eye. Buttons are among the most effective ways to increase conversions from one page to the next or your chosen goal page. The same goes for Confluence pages.
Examples
...
How to use
To add the Button macro to a Confluence page:
Choose “+” in the Confluence editor
Search “button” and select the MacroSuite - Button.
Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Button.' Intuitive configuration dialogue helps users to create and customize buttons fast and easily.
...
Add label here
...
Icon/Emoji
...
Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis.
...
Button Width
...
Use the slider to change the button width. It will add space inside the button.
...
Button Radius
...
Use predefined values to round the edges of your button.
...
Shadow
...
Activate shadow with selecting one of the four predefined shadow styles: No shadow, outer shadow, and drop shadow.
...
Color
...
Choose a fill, border, text, and icon colors from the Atlassian primary and secondary color palette. Choose a fill, border, text, and icon hover colors. If you want to add more colors, use the HEX editor.
...
Button Link
...
Add links to Confluence content (pages and attachments) and external URLs, giving them a more polished look. Use the email tab to open the mail client with the click on the button.
Templates and Library
MacroSuite Button macro got you covered with its templates. If having too many options overwhelms you, pick one of the available Button templates and add a pre-designed button to your Confluence page.
Our UX/UI teams works on more button templates and categories. It is not possible to change or delete predefined templates. Use the library feature to create and maintain the company design guidelines.
...
Roadmap
The button will receive updates to improve performance and user experience. We will introduce the following features soon:
Button library (Save button)
Status colour Green title RELEASED User permissions to save button
Status colour Green title RELEASED More icons
Status colour Green title RELEASED Button shadow
Status colour Green title RELEASED Hover options
Status colour Green title RELEASED Create a ticket in Jira with a click on the button
Status colour Blue title progress Custom icons
Status colour Blue title progress
If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.
...
How to create Buttons with Easy HTML macro
Button group
...
Social media buttons
...
Download Buttons
...
Loading buttons
...
...
are essential for guiding users and creating clear, actionable steps on a page. They serve as high-visibility call to action elements, helping users navigate, make decisions, or trigger key actions.
On Confluence pages, buttons add emphasis, improve structure, and play a crucial role in driving engagement toward important content or goals.
Insert Button
Follow these steps to insert a Button module to your Confluence page:
Open the page you want to edit, or create a new one.
In edit mode, click the ‘+' icon in the toolbar or press '/' on your keyboard to open the macro menu.
Type "Button" or "Optics" in the search bar and select Button (by Optics) from the list to open a configuration dialogue.
In the configuration dialog, choose a button template and customize it using the live preview.
Once you're happy with the setup, click Add to page to insert the module. To cancel, simply click Cancel, and the module won’t be added.
Start with templates
Creating buttons starts with choosing a template. Each one is crafted by our design experts to help you build outstanding, consistent content in Confluence. We're continuously adding new templates to keep your pages fresh and visually engaging.
| Info |
|---|
Confluence admins and users with special permissions can save their custom designs to the Module Library, making them available for the entire team to reuse and share.To learn more about how the Module Library works, read more here. |
Configuration
Buttons come with powerful configuration options that make it easy to adapt their appearance and behavior to fit any use case or align with your company’s branding.
Alignment
Each template includes an alignment setting (left, center, or right) to control how the button is positioned relative to the content above.
Flexible display elements
The label and icon can be toggled on or off individually, but at least one must remain visible to ensure a valid button module.
Link
Button can link to one of the following options, with settings to choose whether the link opens in the same tab or a new tab:
Confluence page: Supports filtering and search to quickly find relevant content in Confluence.
External URL: Accepts any valid link; just paste and save.
Email address: Opens the user's default email app with the address pre-filled, ideal for support or contact scenarios.
Content
While button can be edited inline, the right sidebar provides full access to content settings. It dynamically adjusts based on the selected options in the flexible display elements section.
Buttons support three types of visual elements:
Emojis: Add personality and expressiveness to buttons, making them feel more engaging and approachable.
Icons: Choose from four built-in icon libraries, offering a wide range of styles to match different use cases, from playful to professional.
Logos: Use approved company logos managed through the Optics Styleguide. This feature allows Confluence admins to upload, organize, and reuse logos consistently across buttons and other modules.
Styling options
Styling options allow customization of button size, colors, corner radius, and icon position.
Corner radius: Controls the rounding of button corners, ranging from sharp edges to fully rounded styles.
Size: Select from predefined sizes (S, M, L) to fit various layouts and content hierarchies.
Icon position: Defines whether the icon appears on the left or right side of the button label.
Color: Uses a two-color scheme defined in the Optics Styleguide.
Accent color sets the button’s background fill.
Text color defines the icon and label color.
Edit/Remove Button
To edit or remove a Button module from a Confluence page, follow these steps:
Open the page where the Button module is located
Click Edit to enter page editing mode
Locate and select the Button module that needs to be updated or removed
A small Confluence toolbar will appear above the module, offering options to edit, duplicate, or delete
Click Edit to update the content or Delete to remove the module from the page