AzazelMango: Created page with "{{documentation subpage}} {{used in system}} {{Warning|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 "acti..."

2026-01-19T18:55:29Z

Created page with "{{documentation subpage}}  {{used in system}} {{Warning|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 "acti..."

New page

{{documentation subpage}}

{{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">
[[File:OOjs UI icon logo-wikimediaCommons-invert.svg|15px|link=|alt=]] More details
</syntaxhighlight>

[[File:OOjs UI icon logo-wikimediaCommons-invert.svg|15px|link=|alt=]] More details

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

[[Category:Wikipedia button templates]]
[[Category:MediaWiki interface templates]]
}}</includeonly>

Template:Clickable button/doc - Revision history