Template:Clickable button/doc: Difference between revisions

Content deleted Content added

Inline

Revision as of 00:20, 17 June 2024

This is a documentation subpage for Template:Clickable button.
It may contain usage information, categories and other content that is not part of the original template page.

Shortcuts

{{CLB}}
{{clickb}}
{{CLB2}}
{{Click}}

This template uses Lua:

Module:Clickable button 2 (sandbox)

This template is used in system messages, and on approximately 1,040,000 pages, or roughly 2% of all pages.
Changes to it can cause immediate changes to the Wikipedia user interface.
To avoid major disruption and server load, 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.

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.

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

Any other color will default to white

URLs

{{Clickable button|url=http://example.com}} → http://example.com

{{Clickable button|Example|url=http://example.com}} → Example

{{Clickable button|2=Example|url=http://example.com}} → Example

Template data

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

Template parameters
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 Example 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

@@ Line 25: / Line 25: @@
 == Examples ==
 ===Wikilinks===
-:{{tlc|{{BASEPAGENAME}}|Main Page|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Main Page|Click here to visit the main page|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|Click here to visit the main page}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Click here|link{{=}}no|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Click here|link=no}}</nowiki>}}
 ===Colors===
-:{{tlc|{{BASEPAGENAME}}|Main Page|color{{=}}blue|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|color=blue}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Main Page|color{{=}}red|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|color=red}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Main Page|class{{=}}mw-ui-progressive|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|class=mw-ui-progressive}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Main Page|class{{=}}mw-ui-destructive|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Main Page|class=mw-ui-destructive}}</nowiki>}}
-Any other color will default to {{clickable button|white|link=no}}
+Any other color will default to {{{{BASEPAGENAME}}|white|link=no}}
 ===URLs===
-:{{tlc|{{BASEPAGENAME}}|url{{=}}http://example.com|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|url=http://example.com}}</nowiki>}}
-:{{tlc|{{BASEPAGENAME}}|Example|url{{=}}http://example.com|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|Example|url=http://example.com}}</nowiki>}}
-:{{tlc|1={{BASEPAGENAME}}|2{{=}}Example|url{{=}}http://example.com|_show_result=yes}}
+:{{demo inline|<nowiki>{{</nowiki>{{BASEPAGENAME}}<nowiki>|2=Example|url=http://example.com}}</nowiki>}}
 === Template data ===

v t e Button templates
General button templates	{{Clickable button}} {{Branded Button}} {{Button}} (not clickable) {{Blue button}} {{Mw button}}
WikiProject-specific buttons	Article Wizard button button2 button wizard {{Big Blue Button}} {{Big Red Button}} {{Big Cyan Button}} {{Big Green Button}} {{Big Lime Button}} {{Big Orange Button}} {{Big Turquoise Button}} {{Big Fuchsia Button}} {{Big Skyblue Button}} {{Big Purple Button}} {{Big Yellow Button}} {{AFC button}} {{Cleanup Button}}
Category