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:

1. Open the page you want to edit, or create a new one.

2. In edit mode, click the ‘+' icon in the toolbar or press '/' on your keyboard to open the macro menu.

3. Type "Button" or "Optics" in the search bar and select Button (by Optics) from the list to open a configuration dialogue.

4. In the configuration dialog, choose a button template and customize it using the live preview.

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

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