Template:Clickable button 2/doc: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 12: Line 12:
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}</nowiki></code>
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}</nowiki></code>
**'''Result: '''{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
**'''Result: '''{{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-destructive}}</nowiki></code>
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-destructive}}</nowiki></code> or <code><nowiki>{{Clickable button 2|Main Page|color=red}}</nowiki></code>
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-destructive}}
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-destructive}}
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-constructive}}</nowiki></code>
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-constructive}}</nowiki></code> or <code><nowiki>{{Clickable button 2|Main Page|color=green}}</nowiki></code>
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-constructive}}
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-constructive}}
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-progressive}}</nowiki></code>
*'''Code: '''<code><nowiki>{{Clickable button 2|Main Page|class=mw-ui-progressive}}</nowiki></code> or <code><nowiki>{{Clickable button 2|Main Page|color=blue}}</nowiki></code>
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-progressive}}
**'''Result: '''{{Clickable button 2|Main Page|class=mw-ui-progressive}}


Line 34: Line 34:
"label": "Label",
"label": "Label",
"description": "Defines the text that appears on the button",
"description": "Defines the text that appears on the button",
"default": "the page being linked to"
"example": "Go to Foobar",
"default": "the page being linked to",
"type": "string"
},
},
"url": {
"url": {
Line 74: Line 76:


=== See also ===
=== See also ===
* [[commons:Template:Clickable button]], corresponding clickable button at Commons.
* [[Template:Clickable button]], Clickable button 1.
* [https://design.wikimedia.org/style-guide/components/buttons.html Wikimedia design style guide advice on buttons]
* [https://design.wikimedia.org/style-guide/components/buttons.html Wikimedia design style guide advice on buttons]



Latest revision as of 22:19, 20 October 2023

This template styles a link like a button, using the mediawiki.ui.button module. This expands the clickable area and tap target for the link. It can be used in the following ways,

  • Code: {{Clickable button 2|Main Page}}
  • Code: {{Clickable button 2|Main Page|Cover page}}
  • Code: {{Clickable button 2|Main Page|url=http://en.wikipedia.org}}
  • Code: {{Clickable button 2|Main Page|class=mw-ui-destructive}} or {{Clickable button 2|Main Page|color=red}}
  • Code: {{Clickable button 2|Main Page|class=mw-ui-constructive}} or {{Clickable button 2|Main Page|color=green}}
  • Code: {{Clickable button 2|Main Page|class=mw-ui-progressive}} or {{Clickable button 2|Main Page|color=blue}}

Template data

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

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Link/Label1

Defines the page to link to, and uses that page's title as the text for the button

Example
Foobar
Page namerequired
Label2

Defines the text that appears on the button

Default
the page being linked to
Example
Go to Foobar
Stringsuggested
URLurl

Defines a web address for the button to link to

Example
https://www.example.com
URLoptional
classclass

Defines the visual type of the button

Example
mw-ui-progressive, mw-ui-constructive, mw-ui-destructive
Stringoptional
colorcolor

Alias of class

Example
red, green, blue
Stringoptional
Custom CSS stylingstyle

Allows custom CSS styling to be applied to the button

Default
None
Example
border: 2px solid red;
Stringoptional
Category switchcategory

Whether or not categories should be on

Default
yes
Example
no
Auto value
0
Booleanoptional

See also

Template:Button templates