Template:Clickable button/testcases2

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:

Comparing Template:Clickable button/sandbox to Template:Clickable button/sandbox2

Basic tests

Blank button

{{Template:Clickable button/sandbox}}

Label only

{{Template:Clickable button/sandbox|label=Click me}}

{{Template:Clickable button/sandbox|label=Click me}}

{{Template:Clickable button/sandbox|Click me}}

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

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

{{Template:Clickable button/sandbox2|Click me}} →

{{Template:Clickable button/sandbox|2=Click me}}

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

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

{{Template:Clickable button/sandbox2|2=Click me}} →

Link button

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

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

{{Template:Clickable button/sandbox2|Main Page|label=Go Home |link=Main Page}} →

URL button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Disabled tests

Disabled via parameter

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

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

Disabled via link=no

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

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

Action / Color tests

Progressive (blue/green)

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

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

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

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

Destructive (red)

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

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

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

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

Weight tests

Normal

{{Template:Clickable button/sandbox|label=Normal |weight=normal}}

{{Template:Clickable button/sandbox|label=Normal |weight=normal}} →
{{Template:Clickable button/sandbox2|label=Normal |weight=normal}} →

Bold

{{Template:Clickable button/sandbox|label=Bold |weight=bold}}

{{Template:Clickable button/sandbox|label=Bold |weight=bold}} →
{{Template:Clickable button/sandbox2|label=Bold |weight=bold}} →

Size tests

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

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

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

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

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

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

Icon tests

{{Template:Clickable button/sandbox|icon=edit |label=Search |link=test}}

{{Template:Clickable button/sandbox|icon=edit |label=Search |link=test}} →
{{Template:Clickable button/sandbox2|icon=edit |label=Search |link=test}} →

Icon only (should error without aria-label)

{{Template:Clickable button/sandbox|icon=search |link=yes}}

{{Template:Clickable button/sandbox|icon=search |link=yes}} →
{{Template:Clickable button/sandbox2|icon=search |link=yes}} →

Icon with label

{{Template:Clickable button/sandbox|icon=search |label=Search}}

{{Template:Clickable button/sandbox|icon=search |label=Search}} →
{{Template:Clickable button/sandbox2|icon=search |label=Search}} →

Icon only with aria-label

{{Template:Clickable button/sandbox|aria-label=Search |icon=search}}

{{Template:Clickable button/sandbox|aria-label=Search |icon=search}} →
{{Template:Clickable button/sandbox2|aria-label=Search |icon=search}} →

Accessibility tests

Missing label and aria-label (should error)

{{Template:Clickable button/sandbox|link=Main Page}}

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

With aria-label

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

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

Combination tests

Full example

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

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

Label precedence tests

Case 1: Only 1= given → uses 1=

{{Template:Clickable button/sandbox|MainPage}}

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

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

{{Template:Clickable button/sandbox2|MainPage}} →

Case 2: Only 2= given → uses 2=

{{Template:Clickable button/sandbox|2=Second label}}

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

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

{{Template:Clickable button/sandbox2|2=Second label}} →

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

{{Template:Clickable button/sandbox|Fallback label|Second label}}

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

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

{{Template:Clickable button/sandbox2|Fallback label|Second label}} →

Case 4: label= given only → uses label=

{{Template:Clickable button/sandbox|label=Explicit label}}

{{Template:Clickable button/sandbox|label=Explicit label}} →
{{Template:Clickable button/sandbox2|label=Explicit label}} →

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

{{Template:Clickable button/sandbox|Fallback label|label=Explicit label}}

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

{{Template:Clickable button/sandbox2|Fallback label|label=Explicit label}} →

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

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

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

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

{{Template:Clickable button/sandbox2|2=Second label |label=Explicit label}} →

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

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

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

{{Template:Clickable button/sandbox2|Fallback label|Second label|label=Explicit label}} →

Disabled and link=no tests

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

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

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

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

{{Template:Clickable button/sandbox2|Example page|link=no}} →

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

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

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

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

{{Template:Clickable button/sandbox2|Example page|disabled=1}} →

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

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

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

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

{{Template:Clickable button/sandbox2|Example page|disabled=1 |link=no}} →

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

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

{{Template:Clickable button/sandbox|Example page|label=Explicit label |link=no}} → Example page
```
Example page
```
{{Template:Clickable button/sandbox2|Example page|label=Explicit label |link=no}} →

Examples

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wikilinks

{{Template:Clickable button/sandbox|Main Page|link=Main Page}}

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

{{Template:Clickable button/sandbox2|Main Page|link=Main Page}} →

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

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

{{Template:Clickable button/sandbox2|Clickable button|label=Main Page |link=Clickable button}} →

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

{{Template:Clickable button/sandbox|Clickable button|label=Click here to visit the main page |link=Clickable button}} → Clickable button
```
[[Clickable button |Clickable button]]
```
{{Template:Clickable button/sandbox2|Clickable button|label=Click here to visit the main page |link=Clickable button}} →

{{Template:Clickable button/sandbox|Clickable button|link=Clickable button}}

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

{{Template:Clickable button/sandbox2|Clickable button|link=Clickable button}} →

No link

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

{{Template:Clickable button/sandbox|Clickable button|label=Click here |link=no}} → Clickable button
```
Clickable button
```
{{Template:Clickable button/sandbox2|Clickable button|label=Click here |link=no}} →

{{Template:Clickable button/sandbox|Clickable button|link=no}}

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

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

{{Template:Clickable button/sandbox2|Clickable button|link=no}} →

Colors

{{Template:Clickable button/sandbox|Clickable button|link=Clickable button}}

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

{{Template:Clickable button/sandbox2|Clickable button|link=Clickable button}} →

{{Template:Clickable button/sandbox|Clickable button|color=blue |link=Clickable button}}

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

{{Template:Clickable button/sandbox2|Clickable button|color=blue |link=Clickable button}} →

{{Template:Clickable button/sandbox|Clickable button|color=red |link=Clickable button}}

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

{{Template:Clickable button/sandbox2|Clickable button|color=red |link=Clickable button}} →

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

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

{{Template:Clickable button/sandbox2|Clickable button|class=mw-ui-progressive |link=Clickable button}} →

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

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

{{Template:Clickable button/sandbox2|Clickable button|class=mw-ui-destructive |link=Clickable button}} →

URLs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dummy buttons

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

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

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

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

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

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

Generic

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

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

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

{{Template:Clickable button/sandbox2|Wikipedia|full=yes |link=Wikipedia}} →

Generic 2

{{Template:Clickable button/sandbox|[[Wikipedia]]}}

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

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

{{Template:Clickable button/sandbox2|[[Wikipedia]]}} →

Blank

{{Template:Clickable button/sandbox}}

{{Template:Clickable button/sandbox}} →
{{Template:Clickable button/sandbox2}} →

Color set to red

{{Template:Clickable button/sandbox|Foo|color=red}}

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

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

{{Template:Clickable button/sandbox2|Foo|color=red}} →

Color set to green

{{Template:Clickable button/sandbox|Foo|category=no |color=green}}

{{Template:Clickable button/sandbox|Foo|category=no |color=green}} → Foo

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

{{Template:Clickable button/sandbox2|Foo|category=no |color=green}} →

Color set to BLUE

{{Template:Clickable button/sandbox|Foo|color=BLUE}}

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

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

{{Template:Clickable button/sandbox2|Foo|color=BLUE}} →

Lowercasing

But not of class.

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

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

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

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

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

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

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

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

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

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

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

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

This page was redesigned at the edge.