Template:Clickable button/doc

This is a documentation subpage for Template:Clickable button. It may contain usage information, categories and other content that is not part of the original template page.

This template should never be substituted – use {{Clickable button}}.

This template is used in system messages, and on approximately 1,870,000 pages, or roughly 3% of all pages. Changes to it can cause immediate changes to the Wikipedia user interface. To avoid major disruption and server load, any changes should be tested in the template's /sandbox or /testcases subpages, or in your own user subpage. The tested changes can be added to this page in a single edit. Please discuss changes on the talk page before implementing them.

Buttons should not be used in the article namespace. If the desire is to "navigate" a reader to a new page, taking them away from the current page, a link is preferred. Buttons are used within Wikipedia to trigger an "action".

This template uses Lua: Module:Clickable button (sandbox)

This template styles a link like a button, using the deprecated mediawiki.ui.button module. This expands the clickable area and tap target for the link.

All parameters

{{Clickable button|wikilink|display|color=color|url=url|class=class|link=}}

wikilink

Unnamed first parameter; the title of the page being linked. Brackets are not necessary

display (optional)

Optional unnamed second parameter; the text to display. Not needed if the text to display is the wikilink itself

|color= or |class=

Color to display. |color= accepts blue and red, |class= accepts mw-ui-progressive and mw-ui-destructive

|url=

URL to link through the button. If no wikilink/display text is provided, will show the URL, otherwise will show the wikilink/display text

|link=no

Use this parameter set to "no" to display a button without linking to anything

{{Clickable button|Main Page}} → Main Page

{{Clickable button|Main Page|Click here to visit the main page}} → Click here to visit the main page

{{Clickable button|Click here|link=no}} → Click here

{{Clickable button|Main Page}} → Main Page – without defined |color= and |class=, the default is a white button

{{Clickable button|Main Page|color=blue}} → Main Page

{{Clickable button|Main Page|color=red}} → Main Page

{{Clickable button|Main Page|class=mw-ui-progressive}} → Main Page

{{Clickable button|Main Page|class=mw-ui-destructive}} → Main Page

{{Clickable button|url=https://example.com}} → https://example.com

{{Clickable button|Example|url=https://example.com}} → Example

{{Clickable button|2=Example|url=https://example.com}} → Example

Adding an icon to a button should be avoided. Don't forget to hide the icon from the accessibility DOM by wrapping it in a span that is aria-hidden="true" so that a screen reader doesn't read it out loud.

<span class="mw-ui-button mw-ui-progressive"><span aria-hidden="true">[[File:OOjs UI icon logo-wikimediaCommons-invert.svg|15px|link=|alt=]]</span>&nbsp;More details</span>

 More details

• commons:Template:Clickable button, corresponding clickable button at Commons.
• phab:T146923, which dropped support for mw-ui-constructive, the CSS class for green buttons