Template:Clickable button/sandbox

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

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

{{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

Colors

{{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

URLs

{{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

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|alt=logo]]</span>&nbsp;More details</span>

 More details

Note that the icon links to the image itself, in this case File:OOjs UI icon logo-wikimediaCommons-invert.svg; if JavaScript is enabled, then clicking the icon will bring up MediaViewer.

For an icon that is in the public domain or licensed under CC0, you can suppress this behavior by using |link=|alt= instead of |alt=logo. This should not be done if the icon's license requires attribution. See MOS:BLANKALT and MOS:EMPTYALT for more about this.

<span class="mw-ui-button mw-ui-progressive"><span aria-hidden="true">[[File:Video Camera Icon (white).svg|15px|link=|alt=]]</span>&nbsp;View video</span>

 View video

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

See also

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

The above documentation is transcluded from Template:Clickable button/doc. (edit | history)
Editors can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Add categories to the /doc subpage. Subpages of this template.