Template:Clickable button/testcases

This is the template test cases page for the sandbox of Template:Clickable button. Purge this page to update the examples.
If there are many examples of a complicated template, later ones may break due to limits in MediaWiki; see the HTML comment "NewPP limit report" in the rendered page.
You can also use Special:ExpandTemplates to examine the results of template uses.
You can test how this page looks in the different skins and parsers with these links:

{{test case |_output=nowiki+ |_showcode = yes |_format = inline |_collapsible = yes |_titlecode = yes
| 1       = <!-- Alias for wikilink -->
| 2       = <!-- Alias for label -->
| label   = <!-- Button label -->
| link    = <!-- Wikilink -->
| url     = <!-- URL -->
<!-- Inputs are case-insensitive -->
| action  = <!-- Progressive | Destructive | default: Default -->
| weight  = <!-- Primary | Quiet | default: Normal -->
| size    = <!-- Small | Large | default: Medium. Automatically chooses size based on line-height and device. -->
| icon    = <!-- Per stored icon-list on [[Template:Clickable button/styles.css]].  -->
| aria-label = 
| nocat      =
| category   =
}}

Live testcases

Old

File:Essay.svg

This is the user sandbox of Clickable button. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article. Create or edit your own sandbox here.

Other sandboxes: Main sandbox | Template sandbox

            Finished writing a draft article? Are you ready to request review of it by an experienced editor for possible inclusion in Wikipedia?

Submit your draft for review!

New

File:Essay.svg

This is the user sandbox of Clickable button. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article. Create or edit your own sandbox here.

Other sandboxes: Main sandbox | Template sandbox

            Finished writing a draft article? Are you ready to request review of it by an experienced editor for possible inclusion in Wikipedia?

Submit your draft for review!

Floccinaucinihilipilification

Old

Wikipedia does not have an article on "Floccinaucinihilipilification", but its sister project Wiktionary does:

Read the Wiktionary entry "clickable button/testcases"

You can also:

Search for Floccinaucinihilipilification in Wikipedia to check for alternative titles or spellings.

Start the Floccinaucinihilipilification article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

New

Wikipedia does not have an article on "Floccinaucinihilipilification", but its sister project Wiktionary does:

Read the Wiktionary entry "clickable button/testcases"

You can also:

Search for Floccinaucinihilipilification in Wikipedia to check for alternative titles or spellings.

Start the Floccinaucinihilipilification article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

Damned if you do, damned if you don't

Old

Wikipedia does not have an article on "clickable button/testcases", but its sister project Wiktionary does:

Read the Wiktionary entry "damned if one does and damned if one doesn't"

You can also:

Search for Clickable button/testcases in Wikipedia to check for alternative titles or spellings.

Start the Clickable button/testcases article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

logo

New

Wikipedia does not have an article on "Damned if you do, damned if you don't", but its sister project Wiktionary does:

Read the Wiktionary entry "Damned if you do, damned if you don't"

You can also:

if you do, damned if you don't&fulltext=Search Search for Damned if you do, damned if you don't in Wikipedia to check for alternative titles or spellings.

Start the Damned if you do, damned if you don't article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

With `cdx-button--word-wrap`

Wikipedia does not have an article on "Damned if you do, damned if you don't", but its sister project Wiktionary does:

Read the Wiktionary entry "Damned if you do, damned if you don't"

You can also:

if you do, damned if you don't&fulltext=Search Search for Damned if you do, damned if you don't in Wikipedia to check for alternative titles or spellings.

Start the Damned if you do, damned if you don't article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

Talk:Roberts County, Texas

File:Camera-photo.svg

It is requested that a photograph be included in this article to improve its quality. Wikipedians in Texas may be able to help!
The external tool WordPress Openverse may be able to locate suitable images on Flickr and other web sites.

Upload

File:Camera-photo.svg

It is requested that a photograph be included in this article to improve its quality.
The external tool WordPress Openverse may be able to locate suitable images on Flickr and other web sites.

Upload

Attention whore

Old

Wikipedia does not have an article on "clickable button/testcases", but its sister project Wiktionary does:

Read the Wiktionary entry "clickable button/testcases"

You can also:

Search for Clickable button/testcases in Wikipedia to check for alternative titles or spellings.

Start the Clickable button/testcases article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

logo

New

Wikipedia does not have an article on "Attention whore", but its sister project Wiktionary does:

Read the Wiktionary entry "Attention whore"

You can also:

whore&fulltext=Search Search for Attention whore in Wikipedia to check for alternative titles or spellings.

Start the Attention whore article, using the Article Wizard if you wish, or create a request for it; but please remember that Wikipedia is not a dictionary.

Basic tests

Blank button

{{Clickable button}}

Label only

{{Clickable button|label=Click me}}

{{Clickable button|label=Click me}}

Click me

'"`UNIQ--templatestyles-0000003F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Click me</span>  [[Category:Pages using clickable dummy button]]

{{Clickable button|Click me}}

{{Clickable button|Click me}} → Click me

<span class="plainlinks clickbutton">[[Click me |<span class="mw-ui-button">Click me</span>]]</span>

{{Clickable button/sandbox|Click me}} → Click me

'"`UNIQ--templatestyles-00000043-QINU`"'[[:Click me|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Click me</span>]]

{{Clickable button|2=Click me}}

{{Clickable button|2=Click me}} → Click me

<span class="plainlinks clickbutton"><span class="mw-ui-button">Click me</span></span>

{{Clickable button/sandbox|2=Click me}} → Click me

'"`UNIQ--templatestyles-00000047-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Click me</span>  [[Category:Pages using clickable dummy button]]

Link button

{{Clickable button|Main Page|label=Go Home |link=Main Page}}

{{Clickable button|Main Page|label=Go Home |link=Main Page}} → Main Page

<span class="plainlinks clickbutton">[[Main Page |<span class="mw-ui-button">Main Page</span>]]</span>

{{Clickable button/sandbox|Main Page|label=Go Home |link=Main Page}} → Go Home

'"`UNIQ--templatestyles-0000004B-QINU`"'[[:Main Page|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Go Home</span>]]

URL button

{{Clickable button|url=https://www.wikipedia.org/}}

{{Clickable button|url=https://www.wikipedia.org/}} → https://www.wikipedia.org/

<span class="plainlinks clickbutton">[https://www.wikipedia.org/ <span class="mw-ui-button">https://www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=https://www.wikipedia.org/}} → 70.231.62.181

'"`UNIQ--templatestyles-0000004F-QINU`"'<span class="plainlinks">[https://www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=http:/www.wikipedia.org/}}

{{Clickable button|url=http:/www.wikipedia.org/}} → [http:/www.wikipedia.org/ http:/www.wikipedia.org/]

<span class="plainlinks clickbutton">[http:/www.wikipedia.org/ <span class="mw-ui-button">http:/www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=http:/www.wikipedia.org/}} → 70.231.62.181

'"`UNIQ--templatestyles-00000053-QINU`"'<span class="plainlinks">[http://www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=https:/www.wikipedia.org/}}

{{Clickable button|url=https:/www.wikipedia.org/}} → [https:/www.wikipedia.org/ https:/www.wikipedia.org/]

<span class="plainlinks clickbutton">[https:/www.wikipedia.org/ <span class="mw-ui-button">https:/www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=https:/www.wikipedia.org/}} → 70.231.62.181

'"`UNIQ--templatestyles-00000057-QINU`"'<span class="plainlinks">[https://www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=https://w.wikipedia.org}}

{{Clickable button|url=https://w.wikipedia.org}} → https://w.wikipedia.org

<span class="plainlinks clickbutton">[https://w.wikipedia.org <span class="mw-ui-button">https://w.wikipedia.org</span>]</span>

{{Clickable button/sandbox|url=https://w.wikipedia.org}} → 70.231.62.181

'"`UNIQ--templatestyles-0000005B-QINU`"'<span class="plainlinks">[https://w.wikipedia.org <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=https://wiki.org}}

{{Clickable button|url=https://wiki.org}} → https://wiki.org

<span class="plainlinks clickbutton">[https://wiki.org <span class="mw-ui-button">https://wiki.org</span>]</span>

{{Clickable button/sandbox|url=https://wiki.org}} → 70.231.62.181

'"`UNIQ--templatestyles-0000005F-QINU`"'<span class="plainlinks">[https://wiki.org <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=htps://www.wikipedia.org/}}

{{Clickable button|url=htps://www.wikipedia.org/}} → [htps://www.wikipedia.org/ htps://www.wikipedia.org/]

<span class="plainlinks clickbutton">[htps://www.wikipedia.org/ <span class="mw-ui-button">htps://www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=htps://www.wikipedia.org/}} → [htps://www.wikipedia.org/ 70.231.62.181]

'"`UNIQ--templatestyles-00000063-QINU`"'<span class="plainlinks">[htps://www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=//www.wikipedia.org/}}

{{Clickable button|url=//www.wikipedia.org/}} → //www.wikipedia.org/

<span class="plainlinks clickbutton">[//www.wikipedia.org/ <span class="mw-ui-button">//www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=//www.wikipedia.org/}} → 70.231.62.181

'"`UNIQ--templatestyles-00000067-QINU`"'<span class="plainlinks">[//www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|url=www.wikipedia.org/}}

{{Clickable button|url=www.wikipedia.org/}} → [www.wikipedia.org/ www.wikipedia.org/]

<span class="plainlinks clickbutton">[www.wikipedia.org/ <span class="mw-ui-button">www.wikipedia.org/</span>]</span>

{{Clickable button/sandbox|url=www.wikipedia.org/}} → 70.231.62.181

'"`UNIQ--templatestyles-0000006B-QINU`"'<span class="plainlinks">[http://www.wikipedia.org/ <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

Disabled tests

Disabled via parameter

{{Clickable button|wiki|wiki|disabled=1 |label=Disabled |link=wiki |url=example.org}}

{{Clickable button|wiki|wiki|disabled=1 |label=Disabled |link=wiki |url=example.org}} → [example.org wiki]
```
[example.org wiki]
```

{{Clickable button/sandbox|wiki|wiki|disabled=1 |label=Disabled |link=wiki |url=example.org}} → Disabled

'"`UNIQ--templatestyles-0000006F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Disabled</span>  [[Category:Pages using disabled button]]

Disabled via link=no

{{Clickable button|wiki|wiki|label=No link |link=no |url=example.org}}

{{Clickable button|wiki|wiki|label=No link |link=no |url=example.org}} → wiki

<span class="plainlinks clickbutton"><span class="mw-ui-button">wiki</span></span>

{{Clickable button/sandbox|wiki|wiki|label=No link |link=no |url=example.org}} → No link

'"`UNIQ--templatestyles-00000073-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">No link</span>  [[Category:Pages using disabled button]]

Action / Color tests

Progressive (blue/green)

{{Clickable button|color=blue |label=Progressive}}

{{Clickable button|color=blue |label=Progressive}} →

{{Clickable button/sandbox|color=blue |label=Progressive}} → Progressive

'"`UNIQ--templatestyles-00000077-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Progressive</span>  [[Category:Pages using clickable dummy button]] [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|class=ui-button-green |label=Progressive |link=Main Page}}

{{Clickable button|class=ui-button-green |label=Progressive |link=Main Page}} →

{{Clickable button/sandbox|class=ui-button-green |label=Progressive |link=Main Page}} → Progressive

'"`UNIQ--templatestyles-0000007B-QINU`"'[[:Main Page|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Progressive</span>]]  [[Category:Pages using clickable button with outdated classes]]

Destructive (red)

{{Clickable button|color=red |label=Delete}}

{{Clickable button|color=red |label=Delete}} →

{{Clickable button/sandbox|color=red |label=Delete}} → Delete

'"`UNIQ--templatestyles-0000007F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Delete</span>  [[Category:Pages using clickable dummy button]] [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|class=ui-button-red |label=Delete}}

{{Clickable button|class=ui-button-red |label=Delete}} →

{{Clickable button/sandbox|class=ui-button-red |label=Delete}} → Delete

'"`UNIQ--templatestyles-00000083-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Delete</span>  [[Category:Pages using clickable dummy button]] [[Category:Pages using clickable button with outdated classes]]

Weight tests

Normal

{{Clickable button|label=Normal |link=[[]] |weight=normal}}

{{Clickable button|label=Normal |link=[[]] |weight=normal}} →

{{Clickable button/sandbox|label=Normal |link=[[]] |weight=normal}} → Normal

'"`UNIQ--templatestyles-00000087-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Normal</span>  [[Category:Pages using clickable dummy button]]

Primary

{{Clickable button|action=destructive |label=Primary |link=[[]] |weight=primary}}

{{Clickable button|action=destructive |label=Primary |link=[[]] |weight=primary}} →

{{Clickable button/sandbox|action=destructive |label=Primary |link=[[]] |weight=primary}} → Primary

'"`UNIQ--templatestyles-0000008B-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Primary</span>  [[Category:Pages using clickable dummy button]]

{{Clickable button|action=progressive |label=Primary |link=[[]] |weight=primary}}

{{Clickable button|action=progressive |label=Primary |link=[[]] |weight=primary}} →

{{Clickable button/sandbox|action=progressive |label=Primary |link=[[]] |weight=primary}} → Primary

'"`UNIQ--templatestyles-0000008F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Primary</span>  [[Category:Pages using clickable dummy button]]

Quiet

{{Clickable button|label=Quiet |weight=quiet}}

{{Clickable button|label=Quiet |weight=quiet}} →

{{Clickable button/sandbox|label=Quiet |weight=quiet}} → Quiet

'"`UNIQ--templatestyles-00000093-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-quiet cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Quiet</span>  [[Category:Pages using clickable dummy button]]

Size tests

{{Clickable button|label=Small |size=small}}

{{Clickable button|label=Small |size=small}} →

{{Clickable button/sandbox|label=Small |size=small}} → Small

'"`UNIQ--templatestyles-00000097-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-small cdx-button--fake-button--enabled" role="button" aria-disabled="true">Small</span>  [[Category:Pages using clickable dummy button]]

{{Clickable button|label=Medium |size=medium}}

{{Clickable button|label=Medium |size=medium}} →

{{Clickable button/sandbox|label=Medium |size=medium}} → Medium

'"`UNIQ--templatestyles-0000009B-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Medium</span>  [[Category:Pages using clickable dummy button]]

{{Clickable button|label=Large |size=large}}

{{Clickable button|label=Large |size=large}} →

{{Clickable button/sandbox|label=Large |size=large}} → Large

'"`UNIQ--templatestyles-0000009F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-large cdx-button--fake-button--enabled" role="button" aria-disabled="true">Large</span>  [[Category:Pages using clickable dummy button]]

Icon tests

{{Clickable button|icon=sEarch |label=Search |link=test |nocat=truE}}

{{Clickable button|icon=sEarch |label=Search |link=test |nocat=truE}} →
{{Clickable button/sandbox|icon=sEarch |label=Search |link=test |nocat=truE}} → Search
```
'"`UNIQ--templatestyles-000000A3-QINU`"''"`UNIQ--templatestyles-000000A5-QINU`"'[[:test|Search]] 
```

Icon only (should error without aria-label)

{{Clickable button|icon=Search |link=special:search |nocat=true |weight=quiet}}

{{Clickable button|icon=Search |link=special:search |nocat=true |weight=quiet}} →

{{Clickable button/sandbox|icon=Search |link=special:search |nocat=true |weight=quiet}} → special:search

'"`UNIQ--templatestyles-000000A9-QINU`"''"`UNIQ--templatestyles-000000AB-QINU`"'[[:special:search|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-quiet cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false"><span class="cdx-button__icon cdx-demo-css-icon--search" aria-hidden="true"></span>special:search</span>]]

Icon with label

{{Clickable button|icon=search |label=Search |nocat=true}}

{{Clickable button|icon=search |label=Search |nocat=true}} →

{{Clickable button/sandbox|icon=search |label=Search |nocat=true}} → Search

'"`UNIQ--templatestyles-000000AF-QINU`"''"`UNIQ--templatestyles-000000B1-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true"><span class="cdx-button__icon cdx-demo-css-icon--search" aria-hidden="true"></span>Search</span>

Icon only with aria-label

{{Clickable button|aria-label=Search |icon=search |nocat=true}}

{{Clickable button|aria-label=Search |icon=search |nocat=true}} →

{{Clickable button/sandbox|aria-label=Search |icon=search |nocat=true}} →

'"`UNIQ--templatestyles-000000B5-QINU`"''"`UNIQ--templatestyles-000000B7-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled cdx-button--icon-only" role="button" aria-label="Search" aria-disabled="true"><span class="cdx-button__icon cdx-demo-css-icon--search" aria-hidden="true"></span></span>

Accessibility tests

Missing label and aria-label (should error)

{{Clickable button|link=Main Page}}

{{Clickable button|link=Main Page}} →

{{Clickable button/sandbox|link=Main Page}} → Main Page

'"`UNIQ--templatestyles-000000BB-QINU`"'[[:Main Page|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Main Page</span>]]

With aria-label

{{Clickable button|aria-label=Main page link |link=Main Page}}

{{Clickable button|aria-label=Main page link |link=Main Page}} →

{{Clickable button/sandbox|aria-label=Main page link |link=Main Page}} → Main Page

'"`UNIQ--templatestyles-000000BF-QINU`"'[[:Main Page|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-label="Main page link" aria-disabled="false">Main Page</span>]]

Combination tests

Full example

{{Clickable button|Label1|Label2|Mistake3|action=progressive |aria-label=Download example |icon=success |label=Explicit label |size=large |url=https://done.org |weight=primary}}

{{Clickable button|Label1|Label2|Mistake3|action=progressive |aria-label=Download example |icon=success |label=Explicit label |size=large |url=https://done.org |weight=primary}} → Label1
```
[https://done.org Label1]
```

{{Clickable button/sandbox|Label1|Label2|Mistake3|action=progressive |aria-label=Download example |icon=success |label=Explicit label |size=large |url=https://done.org |weight=primary}}

→ Explicit label

'"`UNIQ--templatestyles-000000C3-QINU`"''"`UNIQ--templatestyles-000000C5-QINU`"'<span class="plainlinks">[https://done.org <span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-large cdx-button--fake-button--enabled" role="button" aria-label="Download example" aria-disabled="false"><span class="cdx-button__icon cdx-demo-css-icon--success" aria-hidden="true"></span>Explicit label</span>]</span>  [[Category:Pages using clickable button with external links]][[Category:Pages using Module:Clickable button with unknown parameters|3 = Mistake3]]

Label precedence tests

Case 1: Only 1= given → uses 1=

{{Clickable button|MainPage}}

{{Clickable button|MainPage}} → MainPage

<span class="plainlinks clickbutton">[[MainPage |<span class="mw-ui-button">MainPage</span>]]</span>

{{Clickable button/sandbox|MainPage}} → MainPage

'"`UNIQ--templatestyles-000000C9-QINU`"'[[:MainPage|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">MainPage</span>]]

Case 2: Only 2= given → uses 2=

{{Clickable button|2=Second label}}

{{Clickable button|2=Second label}} → Second label

<span class="plainlinks clickbutton"><span class="mw-ui-button">Second label</span></span>

{{Clickable button/sandbox|2=Second label}} → Second label

'"`UNIQ--templatestyles-000000CD-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Second label</span>  [[Category:Pages using clickable dummy button]]

Case 3: 1= and 2= given → uses 2= (priority over 1=)

{{Clickable button|Fallback label|Second label}}

{{Clickable button|Fallback label|Second label}} → Second label

<span class="plainlinks clickbutton">[[Fallback label |<span class="mw-ui-button">Second label</span>]]</span>

{{Clickable button/sandbox|Fallback label|Second label}} → Second label

'"`UNIQ--templatestyles-000000D1-QINU`"'[[:Fallback label|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Second label</span>]]

Case 4: label= given only → uses label=

{{Clickable button|label=Explicit label}}

{{Clickable button|label=Explicit label}} →

{{Clickable button/sandbox|label=Explicit label}} → Explicit label

'"`UNIQ--templatestyles-000000D5-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Explicit label</span>  [[Category:Pages using clickable dummy button]]

Case 5: label= and 1= given → uses label= (priority over 1=)

{{Clickable button|Fallback label|label=Explicit label}}

{{Clickable button|Fallback label|label=Explicit label}} → Fallback label

<span class="plainlinks clickbutton">[[Fallback label |<span class="mw-ui-button">Fallback label</span>]]</span>

{{Clickable button/sandbox|Fallback label|label=Explicit label}} → Explicit label

'"`UNIQ--templatestyles-000000D9-QINU`"'[[:Fallback label|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Explicit label</span>]]

Case 6: label= and 2= given → uses label= (priority over 2=)

{{Clickable button|2=Second label |label=Explicit label}}

{{Clickable button|2=Second label |label=Explicit label}} → Second label

<span class="plainlinks clickbutton"><span class="mw-ui-button">Second label</span></span>

{{Clickable button/sandbox|2=Second label |label=Explicit label}} → Explicit label

'"`UNIQ--templatestyles-000000DD-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Explicit label</span>  [[Category:Pages using clickable dummy button]]

Case 7: label=, 1=, and 2= all given → still uses label=

{{Clickable button|Fallback label|Second label|label=Explicit label}}

{{Clickable button|Fallback label|Second label|label=Explicit label}} → Second label

<span class="plainlinks clickbutton">[[Fallback label |<span class="mw-ui-button">Second label</span>]]</span>

{{Clickable button/sandbox|Fallback label|Second label|label=Explicit label}} → Explicit label

'"`UNIQ--templatestyles-000000E1-QINU`"'[[:Fallback label|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Explicit label</span>]]

Disabled and link=no tests

Case A: link=no → no link should be formed

{{Clickable button|Example page|link=no}}

{{Clickable button|Example page|link=no}} → Example page

<span class="plainlinks clickbutton"><span class="mw-ui-button">Example page</span></span>

{{Clickable button/sandbox|Example page|link=no}} → Example page

'"`UNIQ--templatestyles-000000E5-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Example page</span>  [[Category:Pages using disabled button]]

Case B: disabled=1 → button should look disabled, but check if it still links

{{Clickable button|Example page|disabled=1}}

{{Clickable button|Example page|disabled=1}} → Example page

<span class="plainlinks clickbutton">[[Example page |<span class="mw-ui-button">Example page</span>]]</span>

{{Clickable button/sandbox|Example page|disabled=1}} → Example page

'"`UNIQ--templatestyles-000000E9-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Example page</span>  [[Category:Pages using disabled button]]

Case C: link=no and disabled=1 together → should render a non-clickable element, not a link

{{Clickable button|Example page|disabled=1 |link=no}}

{{Clickable button|Example page|disabled=1 |link=no}} → Example page

<span class="plainlinks clickbutton"><span class="mw-ui-button">Example page</span></span>

{{Clickable button/sandbox|Example page|disabled=1 |link=no}} → Example page

'"`UNIQ--templatestyles-000000ED-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Example page</span>  [[Category:Pages using disabled button]]

Case D: Explicit label with link=no → label shows but no link

{{Clickable button|Example page|label=Explicit label |link=no}}

{{Clickable button|Example page|label=Explicit label |link=no}} → Example page

<span class="plainlinks clickbutton"><span class="mw-ui-button">Example page</span></span>

{{Clickable button/sandbox|Example page|label=Explicit label |link=no}} → Explicit label

'"`UNIQ--templatestyles-000000F1-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Explicit label</span>  [[Category:Pages using disabled button]]

Examples

{{Clickable button|label=Click this |link=Example}}

{{Clickable button|label=Click this |link=Example}} →

{{Clickable button/sandbox|label=Click this |link=Example}} → Click this

'"`UNIQ--templatestyles-000000F5-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Click this</span>]]

{{Clickable button|action=destructive |label=Lorem |link=Example}}

{{Clickable button|action=destructive |label=Lorem |link=Example}} →

{{Clickable button/sandbox|action=destructive |label=Lorem |link=Example}} → Lorem

'"`UNIQ--templatestyles-000000F9-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Lorem</span>]]

{{Clickable button|action=progressive |label=Test1progressive |link=Example}}

{{Clickable button|action=progressive |label=Test1progressive |link=Example}} →

{{Clickable button/sandbox|action=progressive |label=Test1progressive |link=Example}} → Test1progressive

'"`UNIQ--templatestyles-000000FD-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Test1progressive</span>]]

{{Clickable button|action=progressive |label=Test2 |link=222 |weight=primary}}

{{Clickable button|action=progressive |label=Test2 |link=222 |weight=primary}} →

{{Clickable button/sandbox|action=progressive |label=Test2 |link=222 |weight=primary}} → Test2

'"`UNIQ--templatestyles-00000101-QINU`"'[[:222|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Test2</span>]]

{{Clickable button|action=destructive |label=Test1 |link=Example |weight=quiet}}

{{Clickable button|action=destructive |label=Test1 |link=Example |weight=quiet}} →

{{Clickable button/sandbox|action=destructive |label=Test1 |link=Example |weight=quiet}} → Test1

'"`UNIQ--templatestyles-00000105-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-quiet cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Test1</span>]]

{{Clickable button|action=progressive |label=Test2 |link=222 |weight=primary}}

{{Clickable button|action=progressive |label=Test2 |link=222 |weight=primary}} →

{{Clickable button/sandbox|action=progressive |label=Test2 |link=222 |weight=primary}} → Test2

'"`UNIQ--templatestyles-00000109-QINU`"'[[:222|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Test2</span>]]

{{Clickable button|action=destructive |label=Lorem |link=Example |weight=primary}}

{{Clickable button|action=destructive |label=Lorem |link=Example |weight=primary}} →

{{Clickable button/sandbox|action=destructive |label=Lorem |link=Example |weight=primary}} → Lorem

'"`UNIQ--templatestyles-0000010D-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Lorem</span>]]

{{Clickable button|label=Ipsum |link=Example |weight=quiet}}

{{Clickable button|label=Ipsum |link=Example |weight=quiet}} →

{{Clickable button/sandbox|label=Ipsum |link=Example |weight=quiet}} → Ipsum

'"`UNIQ--templatestyles-00000111-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-quiet cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Ipsum</span>]]

{{Clickable button|label=Foo bar |link=Example |weight=primary}}

{{Clickable button|label=Foo bar |link=Example |weight=primary}} →

{{Clickable button/sandbox|label=Foo bar |link=Example |weight=primary}} → Foo bar

'"`UNIQ--templatestyles-00000115-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Foo bar</span>]]

{{Clickable button|action=progressive |label=Click! |link=Example |weight=primary}}

{{Clickable button|action=progressive |label=Click! |link=Example |weight=primary}} →

{{Clickable button/sandbox|action=progressive |label=Click! |link=Example |weight=primary}} → Click!

'"`UNIQ--templatestyles-00000119-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Click!</span>]]

{{Clickable button|action=progressive |icon=add |label=Add me |link=Example |weight=primary}}

{{Clickable button|action=progressive |icon=add |label=Add me |link=Example |weight=primary}} →

{{Clickable button/sandbox|action=progressive |icon=add |label=Add me |link=Example |weight=primary}} → Add me

'"`UNIQ--templatestyles-0000011D-QINU`"''"`UNIQ--templatestyles-0000011F-QINU`"'[[:Example|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false"><span class="cdx-button__icon cdx-demo-css-icon--add" aria-hidden="true"></span>Add me</span>]]

{{Clickable button|label=Visit example.org |url=https://example.org}}

{{Clickable button|label=Visit example.org |url=https://example.org}} → https://example.org

<span class="plainlinks clickbutton">[https://example.org <span class="mw-ui-button">https://example.org</span>]</span>

{{Clickable button/sandbox|label=Visit example.org |url=https://example.org}} → Visit example.org

'"`UNIQ--templatestyles-00000123-QINU`"'<span class="plainlinks">[https://example.org <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Visit example.org</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|disabled=1 |label=Disabled |link=Example}}

{{Clickable button|disabled=1 |label=Disabled |link=Example}} →

{{Clickable button/sandbox|disabled=1 |label=Disabled |link=Example}} → Disabled

'"`UNIQ--templatestyles-00000127-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Disabled</span>  [[Category:Pages using disabled button]]

Wikilinks

{{Clickable button|Main Page|link=Main Page}}

{{Clickable button|Main Page|link=Main Page}} → Main Page

<span class="plainlinks clickbutton">[[Main Page |<span class="mw-ui-button">Main Page</span>]]</span>

{{Clickable button/sandbox|Main Page|link=Main Page}} → Main Page

'"`UNIQ--templatestyles-0000012B-QINU`"'[[:Main Page|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Main Page</span>]]

{{Clickable button|Clickable button|label=Main Page |link=Clickable button}}

{{Clickable button|Clickable button|label=Main Page |link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|label=Main Page |link=Clickable button}} → Main Page

'"`UNIQ--templatestyles-0000012F-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Main Page</span>]]

{{Clickable button|Clickable button|label=Click here to visit the main page |link=Clickable button}}

{{Clickable button|Clickable button|label=Click here to visit the main page |link=Clickable button}} → Clickable button
```
[[Clickable button |Clickable button]]
```

{{Clickable button/sandbox|Clickable button|label=Click here to visit the main page |link=Clickable button}} → Click here to visit the main page

'"`UNIQ--templatestyles-00000133-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Click here to visit the main page</span>]]

{{Clickable button|Clickable button|link=Clickable button}}

{{Clickable button|Clickable button|link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-00000137-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]

No link

{{Clickable button|Clickable button|label=Click here |link=no}}

{{Clickable button|Clickable button|label=Click here |link=no}} → Clickable button

<span class="plainlinks clickbutton"><span class="mw-ui-button">Clickable button</span></span>

{{Clickable button/sandbox|Clickable button|label=Click here |link=no}} → Click here

'"`UNIQ--templatestyles-0000013B-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Click here</span>  [[Category:Pages using disabled button]]

{{Clickable button|Clickable button|link=no}}

{{Clickable button|Clickable button|link=no}} → Clickable button

<span class="plainlinks clickbutton"><span class="mw-ui-button">Clickable button</span></span>

{{Clickable button/sandbox|Clickable button|link=no}} → Clickable button

'"`UNIQ--templatestyles-0000013F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Clickable button</span>  [[Category:Pages using disabled button]]

Colors

{{Clickable button|Clickable button|link=Clickable button}}

{{Clickable button|Clickable button|link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-00000143-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]

{{Clickable button|Clickable button|color=blue |link=Clickable button}}

{{Clickable button|Clickable button|color=blue |link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button mw-ui-progressive">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|color=blue |link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-00000147-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]  [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|Clickable button|color=red |link=Clickable button}}

{{Clickable button|Clickable button|color=red |link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button mw-ui-destructive">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|color=red |link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-0000014B-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]  [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|Clickable button|class=mw-ui-progressive |link=Clickable button}}

{{Clickable button|Clickable button|class=mw-ui-progressive |link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button mw-ui-progressive">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|class=mw-ui-progressive |link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-0000014F-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]  [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|Clickable button|class=mw-ui-destructive |link=Clickable button}}

{{Clickable button|Clickable button|class=mw-ui-destructive |link=Clickable button}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button mw-ui-destructive">Clickable button</span>]]</span>

{{Clickable button/sandbox|Clickable button|class=mw-ui-destructive |link=Clickable button}} → Clickable button

'"`UNIQ--templatestyles-00000153-QINU`"'[[:Clickable button|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]]  [[Category:Pages using clickable button with outdated classes]]

URLs

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

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

<span class="plainlinks clickbutton">[https://example.com <span class="mw-ui-button">Clickable button</span>]</span>

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

'"`UNIQ--templatestyles-00000157-QINU`"'<span class="plainlinks">[https://example.com <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]</span>  [[Category:Pages using clickable button with external links]]

{{Clickable button|Clickable button|aria-label= |url=https://example.com}}

{{Clickable button|Clickable button|aria-label= |url=https://example.com}} → Clickable button

<span class="plainlinks clickbutton">[https://example.com <span class="mw-ui-button">Clickable button</span>]</span>

{{Clickable button/sandbox|Clickable button|aria-label= |url=https://example.com}} → Clickable button

'"`UNIQ--templatestyles-0000015B-QINU`"'<span class="plainlinks">[https://example.com <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Clickable button</span>]</span>  [[Category:Pages using clickable button with external links]]

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

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

<span class="plainlinks clickbutton">[https://example.com <span class="mw-ui-button">Clickable button</span>]</span>

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

'"`UNIQ--templatestyles-0000015F-QINU`"'<span class="plainlinks">[https://example.com <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Example</span>]</span>  [[Category:Pages using clickable button with external links]]

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

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

<span class="plainlinks clickbutton">[https://example.com <span class="mw-ui-button">Clickable button</span>]</span>

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

'"`UNIQ--templatestyles-00000163-QINU`"'<span class="plainlinks">[https://example.com <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Example</span>]</span>  [[Category:Pages using clickable button with external links]]

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

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

<span class="plainlinks clickbutton">[https://example.com <span class="mw-ui-button">https://example.com</span>]</span>

{{Clickable button/sandbox|url=https://example.com}} → 70.231.62.181

'"`UNIQ--templatestyles-00000167-QINU`"'<span class="plainlinks">[https://example.com <span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">70.231.62.181</span>]</span>  [[Category:Pages using clickable button with external links]]

Dummy buttons

{{Clickable button|Clickable button|class=blue |label=Main Page |link=no}}

{{Clickable button|Clickable button|class=blue |label=Main Page |link=no}} → Clickable button

<span class="plainlinks clickbutton"><span class="mw-ui-button blue">Clickable button</span></span>

{{Clickable button/sandbox|Clickable button|class=blue |label=Main Page |link=no}} → Main Page

'"`UNIQ--templatestyles-0000016B-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Main Page</span>  [[Category:Pages using disabled button]] [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|Clickable button|class=blue |label=Main Page |link=no}}

{{Clickable button|Clickable button|class=blue |label=Main Page |link=no}} → Clickable button

<span class="plainlinks clickbutton"><span class="mw-ui-button blue">Clickable button</span></span>

{{Clickable button/sandbox|Clickable button|class=blue |label=Main Page |link=no}} → Main Page

'"`UNIQ--templatestyles-0000016F-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Main Page</span>  [[Category:Pages using disabled button]] [[Category:Pages using clickable button with outdated classes]]

{{Clickable button|label=Main Page |link=no}}

{{Clickable button|label=Main Page |link=no}} →

{{Clickable button/sandbox|label=Main Page |link=no}} → Main Page

'"`UNIQ--templatestyles-00000173-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--disabled" role="button" aria-disabled="true">Main Page</span>  [[Category:Pages using disabled button]]

Generic

{{Clickable button|Wikipedia|full=yes |link=Wikipedia}}

{{Clickable button|Wikipedia|full=yes |link=Wikipedia}} → Wikipedia

<span class="plainlinks clickbutton">[[Wikipedia |<span class="mw-ui-button">Wikipedia</span>]]</span>

{{Clickable button/sandbox|Wikipedia|full=yes |link=Wikipedia}} → Wikipedia

'"`UNIQ--templatestyles-00000177-QINU`"'[[:Wikipedia|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Wikipedia</span>]] [[Category:Pages using Module:Clickable button with unknown parameters|full]]

Generic 2

{{Clickable button|[[Wikipedia]]}}

{{Clickable button|[[Wikipedia]]}} → Wikipedia

<span class="plainlinks clickbutton">[[Wikipedia |<span class="mw-ui-button">Wikipedia</span>]]</span>

{{Clickable button/sandbox|[[Wikipedia]]}} → [[Wikipedia]]

'"`UNIQ--templatestyles-0000017B-QINU`"'[[:Wikipedia|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">&#91;&#91;Wikipedia&#93;&#93;</span>]]

Blank

{{Clickable button}}

{{Clickable button}} →
{{Clickable button/sandbox}} →

Color set to red

{{Clickable button|Foo|color=red}}

{{Clickable button|Foo|color=red}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="mw-ui-button mw-ui-destructive">Foo</span>]]</span>

{{Clickable button/sandbox|Foo|color=red}} → Foo

'"`UNIQ--templatestyles-00000181-QINU`"'[[:Foo|<span class="cdx-button cdx-button--fake-button cdx-button--action-destructive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Foo</span>]]  [[Category:Pages using clickable button with outdated classes]]

Color set to green

{{Clickable button|Foo|category=Example categorization |color=green}}

{{Clickable button|Foo|category=Example categorization |color=green}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="mw-ui-button mw-ui-constructive">Foo</span>]]</span>

{{Clickable button/sandbox|Foo|category=Example categorization |color=green}} → Foo Example categorization

'"`UNIQ--templatestyles-00000185-QINU`"'[[:Foo|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Foo</span>]] [[Example categorization]] [[Category:Pages using clickable button with outdated classes]][[Category:Pages using Module:Clickable button with unknown parameters|category]]

Color set to BLUE

{{Clickable button|Foo|color=BLUE}}

{{Clickable button|Foo|color=BLUE}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="mw-ui-button mw-ui-progressive">Foo</span>]]</span>

{{Clickable button/sandbox|Foo|color=BLUE}} → Foo

'"`UNIQ--templatestyles-00000189-QINU`"'[[:Foo|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="false">Foo</span>]]  [[Category:Pages using clickable button with outdated classes]]

Lowercasing

But not of class.

{{Clickable button|class=metadata |icon=SEARch |label=Search |link=Special:Search |nocat=true}}

{{Clickable button|class=metadata |icon=SEARch |label=Search |link=Special:Search |nocat=true}} →

{{Clickable button/sandbox|class=metadata |icon=SEARch |label=Search |link=Special:Search |nocat=true}} → Search

'"`UNIQ--templatestyles-00000195-QINU`"''"`UNIQ--templatestyles-00000197-QINU`"'[[:Special:Search|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium metadata cdx-button--fake-button--enabled" role="button" aria-disabled="false"><span class="cdx-button__icon cdx-demo-css-icon--search" aria-hidden="true"></span>Search</span>]]

{{Clickable button|class=METAdata |icon=search |label=Search |link=Special:Search |nocat=true}}

{{Clickable button|class=METAdata |icon=search |label=Search |link=Special:Search |nocat=true}} →

{{Clickable button/sandbox|class=METAdata |icon=search |label=Search |link=Special:Search |nocat=true}} → Search

'"`UNIQ--templatestyles-0000019B-QINU`"''"`UNIQ--templatestyles-0000019D-QINU`"'[[:Special:Search|<span class="cdx-button cdx-button--fake-button cdx-button--action- cdx-button--weight-normal cdx-button--size-medium metadata cdx-button--fake-button--enabled" role="button" aria-disabled="false"><span class="cdx-button__icon cdx-demo-css-icon--search" aria-hidden="true"></span>Search</span>]]

{{Clickable button|color=BLUE |label=Search |nocat=true |wikilink=Special:Search}}

{{Clickable button|color=BLUE |label=Search |nocat=true |wikilink=Special:Search}} →

{{Clickable button/sandbox|color=BLUE |label=Search |nocat=true |wikilink=Special:Search}} → Search

'"`UNIQ--templatestyles-000001A1-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Search</span>

{{Clickable button|color=blue |label=Search |nocat=true |wikilink=Special:Search}}

{{Clickable button|color=blue |label=Search |nocat=true |wikilink=Special:Search}} →

{{Clickable button/sandbox|color=blue |label=Search |nocat=true |wikilink=Special:Search}} → Search

'"`UNIQ--templatestyles-000001A5-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Search</span>

{{Clickable button|class=UI-button-Green |label=Search |nocat=true |wikilink=Special:Search}}

{{Clickable button|class=UI-button-Green |label=Search |nocat=true |wikilink=Special:Search}} →

{{Clickable button/sandbox|class=UI-button-Green |label=Search |nocat=true |wikilink=Special:Search}} → Search

'"`UNIQ--templatestyles-000001A9-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Search</span>

{{Clickable button|class=ui-button-green |label=Search |nocat=true |wikilink=Special:Search}}

{{Clickable button|class=ui-button-green |label=Search |nocat=true |wikilink=Special:Search}} →

{{Clickable button/sandbox|class=ui-button-green |label=Search |nocat=true |wikilink=Special:Search}} → Search

'"`UNIQ--templatestyles-000001AD-QINU`"'<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-normal cdx-button--size-medium cdx-button--fake-button--enabled" role="button" aria-disabled="true">Search</span>

Template:Clickable button/testcases

Live testcases

{{User sandbox}}

Floccinaucinihilipilification

Old

New

Damned if you do, damned if you don't

Old

New

With cdx-button--word-wrap

Talk:Roberts County, Texas

Attention whore

Old

New

Basic tests

Blank button

Label only

Link button

URL button

Disabled tests

Action / Color tests

Weight tests

Size tests

Icon tests

Accessibility tests

Combination tests

Label precedence tests

Disabled and link=no tests

Examples

Wikilinks

No link

Colors

URLs

Dummy buttons

Generic

Generic 2

Blank

Color set to red

Color set to green

Color set to BLUE

Categories

Lowercasing

Navigation menu

Search

With `cdx-button--word-wrap`