What is UI Button?

UI Button creates colorful links to internal and external sites with a predefined set of icons.

Setting your own color scheme

Since 2.0 of RefinedToolkit you can set your own color scheme to the text boxes of RefinedToolkit.

Learn more here: Setting your own color scheme



Using UI Button 

To add UI Button to a page

In the Confluence editor, choose Insert > Other Macros.

Find and select the UI Button macro.

Make the settings that suits you: icon, color, open in new tab etc.

Speeding up macro entry with autocomplete: Type { and the beginning of the macro name, to see a list of suggested macros.


To edit an existing macro

Click the macro placeholder and choose Edit.

A macro dialog window will open, where you can edit the parameters of the macro.


Wiki Markup


{ui-button:title=My title|url=http://www.google.com|icon=link|newWindow=true|color=green}

Parameters

ParameterDefaultDescriptionVersion
Title (title) The title of the button1.0
Tooltip{title}A tooltip for your button, shown when button is hovered.2.1
URL (url) E.g. http://www.google.com1.0
Icon (icon)none

Choose an icon:

  • text
  • link
  • download
  • mail (Introduced in version 1.1)
  • home
  • idea
  • info
  • question
  • star
  • settings
  • add
  • edit
  • delete
1.0
Color (color)grayChoose a color:

  • blue
  • gray
  • green
  • orange
  • purple
  • red
  • turquoise
1.0
Size (size)medium

Choose a size:

  • small
  • medium
  • large
1.0
Display (display)inlineinline or block. block = full width1.0
Open in a new Window (newWindow)falsenewWindow=true – Open the link in a new browser window1.0

Setting your own color scheme

To edit the color scheme of the UI Button

Go to General Configuration > RefinedToolkit Configuration


Click to edit each of the colors to set the shade you want your button to be.

Note

  • It is not possible to change the label of the UI Button.
  • Any color will be applied globally to all UI Buttons.

 

Examples

Block mode

RefinedTheme on Atlassian Marketplace

RefinedWiki Support

RefinedTheme for Confluence Documentation

RefinedTheme for Jira Service Desk Server

RefinedSites for Cloud

RefinedSpaces for Confluence Cloud

RefinedWiki Blog





Inline mode

RefinedTheme on Atlassian Marketplace

RefinedWiki Support

RefinedTheme for Confluence Documentation

RefinedTheme for Jira Service Desk Server

RefinedSites for Cloud

RefinedSpaces for Confluence Cloud

RefinedWiki Blog