Template:Clickable button/sandbox

This is the template sandbox page for Template:Clickable button (diff).
See also the companion subpage for test cases.

Template documentation[view] [edit] [history] [purge]

This template is used in system messages.
Changes to it can cause immediate changes to the DA user interface.
To avoid major disruption, 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.

Script error: No such module "Shortcut".

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.

Usage

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

Examples

Wikilinks

Script error: No such module "Demo".

Colors

Script error: No such module "Demo". – without defined |color= and |class=, the default is a white button

Script error: No such module "Demo".

URLs

Script error: No such module "Demo".

Adding an icon

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

Template data

Styles a link like a button, using the mediawiki.ui.button module

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Link/Label	`1`	Defines the page to link to, and uses that page's title as the text for the button Example Foobar	Page name	required
Label	`2`	Defines the text that appears on the button Default the page being linked to	Unknown	suggested
URL	`url`	Defines a web address for the button to link to Example https://www.example.com	URL	optional
class	`class`	Defines the visual type of the button Suggested values `mw-ui-progressive` `mw-ui-destructive`	String	optional
Custom CSS styling	`style`	Allows custom CSS styling to be applied to the button Default None Example border: 2px solid red;	String	optional
Category switch	`category`	Whether or not categories should be on Default yes Example no Auto value `0`	Boolean	optional
color	`color`	Defines the visual type of the button Suggested values `blue` `red`	String	optional