...
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 start 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. |
...
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 Button elements such as icon, and label can be toggled on enabled or off individually, but at least one must remain visible to ensure a valid button moduledisabled, providing flexibility to adapt buttons to different use cases. Available elements vary depending on the selected panel template.
Link
Button Buttons can link to one of the following optionsdestinations, with settings to choose whether the link opens in the same tab or a new tabone:
Confluence page: Supports Includes filtering and search functionality to quickly find locate and link relevant content in within Confluence.
External URL: Accepts any valid link; just paste web address, simply paste the link and save.
Email address: Opens the user's default email app client with the address pre-filled, making it ideal for support or contact scenarioscontact or support-related actions.
Content
While button buttons 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:
EmojisEmoji: Add Used to add personality and expressiveness to buttonscards, making them content feel more engaging and approachablefriendly.
Icons: Choose Available from four built-in icon libraries, offering a wide range variety of styles to match suit different use cases, from playful to professional.
Logos: Use approved company logos managed through Part of a dedicated feature connected to the Optics Styleguide. This feature allows Allows Confluence admins to upload, organizemanage, and reuse use approved company logos consistently across buttons cards and other modules.
Styling options
Styling options allow customization of you to customize the 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, and 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:
...