View source for Template:Clickable button/doc

{{documentation subpage}}
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
{{used in system}}
{{Warning|[[MOS:BUTTONS|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 [[Wikipedia:Manual of Style/Linking|link]] is preferred. Buttons are used within Wikipedia to trigger an "action".}}
{{template shortcut|CLB|clickb|Click}}
{{lua|Module:Clickable button}}

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
:{{tlc|{{BASEPAGENAME}}|''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
;{{para|color}} or {{para|class}}
:Color to display. {{para|color}} accepts <code>blue</code> and <code>red</code>, {{para|class}} accepts <code>mw-ui-progressive</code> and <code>mw-ui-destructive</code>
;{{para|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
;{{para|link|no}}
:Use this parameter set to "no" to display a button without linking to anything

== Examples ==
===Wikilinks===
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|Click here to visit the main page}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Click here|link=no}}</nowiki>}}

===Colors===
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page}}</nowiki>}} – without defined {{para|color}} and {{para|class}}, the default is a white button
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|color=blue}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|color=red}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|class=mw-ui-progressive}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|class=mw-ui-destructive}}</nowiki>}}

===URLs===
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|url=https://example.com}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Example|url=https://example.com}}</nowiki>}}
:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|2=Example|url=https://example.com}}</nowiki>}}

===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 {{attr|aria-hidden|"true"}} so that a screen reader doesn't read it out loud.

<syntaxhighlight lang="wikitext">
<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>
</syntaxhighlight>

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

== Template data ==
<templatedata>
{
	"params": {
		"1": {
			"required": true,
			"label": "Link/Label",
			"description": "Defines the page to link to, and uses that page's title as the text for the button",
			"example": "Foobar",
			"type": "wiki-page-name"
		},
		"2": {
			"suggested": true,
			"label": "Label",
			"description": "Defines the text that appears on the button",
			"default": "the page being linked to"
		},
		"url": {
			"type": "url",
			"label": "URL",
			"description": "Defines a web address for the button to link to",
			"example": "https://www.example.com"
		},
		"class": {
			"type": "string",
			"description": "Defines the visual type of the button",
			"suggestedvalues": [
				"mw-ui-progressive",
				"mw-ui-destructive"
			]
		},
		"style": {
			"type": "string",
			"label": "Custom CSS styling",
			"description": "Allows custom CSS styling to be applied to the button",
			"example": "border: 2px solid red;",
			"default": "None"
		},
		"category": {
			"type": "boolean",
			"label": "Category switch",
			"description": "Whether or not categories should be on",
			"example": "no",
			"default": "yes",
			"autovalue": "0"
		},
		"color": {
			"suggestedvalues": [
				"blue",
				"red"
			],
			"description": "Defines the visual type of the button",
			"type": "string"
		}
	},
	"description": "Styles a link like a button, using the mediawiki.ui.button module",
	"format": "inline"
}
</templatedata>

== See also ==
* [[commons:Template:Clickable button]], corresponding clickable button at Commons.
* [https://design.wikimedia.org/style-guide/components/buttons.html Wikimedia design style guide advice on buttons]
* [[phab:T146923]], which dropped support for <code>mw-ui-constructive</code>, the CSS class for green buttons

{{Button templates}}
<includeonly>{{Sandbox other||
<!-- Categories and interwikis go here: -->
[[Category:Wikipedia button templates]]
[[Category:MediaWiki interface templates]]
}}</includeonly>