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

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

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.

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

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

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.

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

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

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

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

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}} → Main Page

<span class="plainlinks clickbutton">[[Main Page |<span class="mw-ui-button">Main Page</span>]]</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/}} → 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|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/}} → [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|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/}} → [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|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}} → 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|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}} → https://wiki.org

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

{{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/ 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|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/}} → //www.wikipedia.org/

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

{{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/}} → [www.wikipedia.org/ www.wikipedia.org/]

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

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}} → [example.org wiki]
```
[example.org wiki]
```

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}} → wiki
```
wiki
```

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

{{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}} →

Destructive (red)

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

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

{{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}} →

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

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

{{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}} →

Quiet

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

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

Size tests

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

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

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

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

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

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

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

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

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

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

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

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

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}} → Label1
```
[https://done.org Label1]
```

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

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

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

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

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

Case 4: label= given only → uses label=

{{Clickable button|label=Explicit label}}

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

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}} → Fallback label

<span class="plainlinks clickbutton">[[Fallback label |<span class="mw-ui-button">Fallback label</span>]]</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}} → Second label

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

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}} → Second label

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

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

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

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

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

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

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}} → Example page

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

Examples

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

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

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} → https://example.org

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

{{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}} →

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

<span class="plainlinks clickbutton">[[Main Page |<span class="mw-ui-button">Main Page</span>]]</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}} → Clickable button

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button">Clickable button</span>]]</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}} → Clickable button
```
[[Clickable button |Clickable button]]
```

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

<span class="plainlinks clickbutton">[[Clickable button |<span class="mw-ui-button">Clickable button</span>]]</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}} → Clickable button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{{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}} → Clickable button

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

{{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}} → Clickable button

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

{{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}} → https://example.com

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

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}} → Clickable button

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

{{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}} → Clickable button

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

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

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

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

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

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

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

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

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

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

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

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

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

{{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}} →

{{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}} →

{{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}} →

{{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}} →

{{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}} →

This page was redesigned at the edge.

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

With `cdx-button--word-wrap`