සැකිල්ල:Clickable button 2/testcases

This is the template test cases page for the sandbox of සැකිල්ල:Clickable button 2. 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 with these links:

To do

Fix #URL placed as label by removing the extra brackets.
Solve #URL only (alt) by letting parameters be in all caps.
Somehow make the highlights of the button text act exactly like links do regardless if a link is present or not. See Template:Clickable button 2/styles.css.
If p.bracketsremoved is true and |2= unset, then split the first parameter in two across a pipe.

Blank

{{Clickable button 2}}

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

{{Clickable button}} → Button text

<span class="mw-ui-button ">Button text</span>

No link

{{Clickable button 2||Foo}}

{{Clickable button 2||Foo}} → Foo

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

{{Clickable button 2/sandbox||Foo}} → Foo

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

{{Clickable button||Foo}} →
```

```

nolink set

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

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

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

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

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

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

1st set nil; 2nd unset

{{Clickable button 2|}}

{{Clickable button 2|}} →
{{Clickable button 2/sandbox|}} →
{{Clickable button|}} →
```

```

nolink and URL both set

{{Clickable button 2|bar|link=no |url=http://www.example.com}}

{{Clickable button 2|bar|link=no |url=http://www.example.com}} → bar

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

{{Clickable button 2/sandbox|bar|link=no |url=http://www.example.com}} → bar

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

{{Clickable button|bar|link=no |url=http://www.example.com}} → bar
```
bar
```

nolink and URL both set (alt)

{{Clickable button 2|link=no |url=http://www.example.com}}

{{Clickable button 2|link=no |url=http://www.example.com}} → http://www.example.com

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button">http://www.example.com</span>]]</span>

{{Clickable button 2/sandbox|link=no |url=http://www.example.com}} → http://www.example.com

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button">http://www.example.com</span>]]</span>

{{Clickable button|link=no |url=http://www.example.com}} → Button text
```
Button text
```

nolink and URL both set (alt) with nowiki

{{Clickable button 2|link=no|url=<nowiki>http://www.example.com</nowiki>}}

{{Clickable button 2|link=no |url='"`UNIQ--nowiki-00000004-QINU`"'}} → http://www.example.com

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button">'"`UNIQ--nowiki-00000004-QINU`"'</span>]]</span>

{{Clickable button 2/sandbox|link=no |url='"`UNIQ--nowiki-00000004-QINU`"'}} → http://www.example.com

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button">'"`UNIQ--nowiki-00000004-QINU`"'</span>]]</span>

{{Clickable button|link=no |url='"`UNIQ--nowiki-00000004-QINU`"'}} → Button text
```
Button text
```

nolink, URL, and label all set

{{Clickable button 2|2=Foobar |link=no |url=http://www.example.com}}

{{Clickable button 2|2=Foobar |link=no |url=http://www.example.com}} → Foobar

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

{{Clickable button 2/sandbox|2=Foobar |link=no |url=http://www.example.com}} → Foobar
```
Foobar
```
{{Clickable button|2=Foobar |link=no |url=http://www.example.com}} → Button text
```
Button text
```

nolink, URL, and label all set (alt)

{{Clickable button 2|Foobar|link=no |url=http://www.example.com}}

{{Clickable button 2|Foobar|link=no |url=http://www.example.com}} → Foobar

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

{{Clickable button 2/sandbox|Foobar|link=no |url=http://www.example.com}} → Foobar

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

{{Clickable button|Foobar|link=no |url=http://www.example.com}} → Foobar
```
Foobar
```

Link only

{{Clickable button 2|Foo}}

{{Clickable button 2|Foo}} → Foo

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

{{Clickable button 2/sandbox|Foo}} → Foo

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

{{Clickable button|Foo}} → Foo
```
Foo
```

URL only

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

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

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

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

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

{{Clickable button|url=http://www.example.com}} → Button text
```
Button text
```

URL placed as label

{{Clickable button 2|http://www.example.com}}

{{Clickable button 2|http://www.example.com}} → [http://www.example.com]

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

{{Clickable button 2/sandbox|http://www.example.com}} → http://www.example.com

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

{{Clickable button|http://www.example.com}} → http://www.example.com
```
http://www.example.com
```

Link and display

{{Clickable button 2|Foo|Bar}}

{{Clickable button 2|Foo|Bar}} → Bar

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

{{Clickable button 2/sandbox|Foo|Bar}} → Bar

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

{{Clickable button|Foo|Bar}} → Foo
```
Foo
```

URL and display

{{Clickable button 2|Foo|url=http://www.example.com}}

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

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

{{Clickable button 2/sandbox|Foo|url=http://www.example.com}} → Foo

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

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

URL and display (alt)

{{Clickable button 2|2=Foo |url=http://www.example.com}}

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

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

{{Clickable button 2/sandbox|2=Foo |url=http://www.example.com}} → Foo

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

{{Clickable button|2=Foo |url=http://www.example.com}} → Button text
```
Button text
```

Constructive

{{Clickable button 2|Foo|class=mw-ui-constructive}}

{{Clickable button 2|Foo|class=mw-ui-constructive}} → Foo

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

{{Clickable button 2/sandbox|Foo|class=mw-ui-constructive}} → Foo

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

{{Clickable button|Foo|class=mw-ui-constructive}} → Foo
```
Foo
```

Progressive

{{Clickable button 2|Foo|class=mw-ui-progressive}}

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

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

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

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

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

Destructive

{{Clickable button 2|Foo|class=mw-ui-destructive}}

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

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

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

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

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

Same page link

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases}}

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button" style="background-color:#CCC;color:#666">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button 2/sandbox|සැකිල්ල:Clickable button 2/testcases}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases |<span class="mw-ui-button" style="background-color:#CCC;color:#666">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button|සැකිල්ල:Clickable button 2/testcases}} → සැකිල්ල:Clickable button 2/testcases
```
සැකිල්ල:Clickable button 2/testcases
```

Same page constructive

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-constructive}}

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-constructive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-constructive" style="background-color:#2962CB;color:#fff">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button 2/sandbox|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-constructive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-constructive" style="background-color:#2962CB;color:#fff">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-constructive}} → සැකිල්ල:Clickable button 2/testcases
```
සැකිල්ල:Clickable button 2/testcases
```

Same page progressive

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-progressive}}

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-progressive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-progressive" style="background-color:#2962CB;color:#fff">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button 2/sandbox|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-progressive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-progressive" style="background-color:#2962CB;color:#fff">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-progressive}} → සැකිල්ල:Clickable button 2/testcases
```
සැකිල්ල:Clickable button 2/testcases
```

Same page destructive

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-destructive}}

{{Clickable button 2|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-destructive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-destructive" style="background-color:#A6170F">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button 2/sandbox|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-destructive}} → සැකිල්ල:Clickable button 2/testcases

<span class="plainlinks clickbutton">[[සැකිල්ල:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-destructive" style="background-color:#A6170F">සැකිල්ල:Clickable button 2/testcases</span>]]</span>

{{Clickable button|සැකිල්ල:Clickable button 2/testcases|class=mw-ui-destructive}} → සැකිල්ල:Clickable button 2/testcases
```
සැකිල්ල:Clickable button 2/testcases
```

Class case

{{Clickable button 2|Foo|class=MW-UI-Constructive}}

{{Clickable button 2|Foo|class=MW-UI-Constructive}} → Foo

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

{{Clickable button 2/sandbox|Foo|class=MW-UI-Constructive}} → Foo

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

{{Clickable button|Foo|class=MW-UI-Constructive}} → Foo
```
Foo
```

Old button class red

{{Clickable button 2|Foo|category=no |class=ui-button-red}}

{{Clickable button 2|Foo|category=no |class=ui-button-red}} → Foo

<span class="plainlinks clickbutton">[[Foo|<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-red">Foo</span>]]</span>

{{Clickable button 2/sandbox|Foo|category=no |class=ui-button-red}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-red">Foo</span>]]</span>

{{Clickable button|Foo|category=no |class=ui-button-red}} → Foo
```
Foo
```

Old button class green

{{Clickable button 2|Foo|category=no |class=ui-button-green}}

{{Clickable button 2|Foo|category=no |class=ui-button-green}} → Foo

<span class="plainlinks clickbutton">[[Foo|<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-green">Foo</span>]]</span>

{{Clickable button 2/sandbox|Foo|category=no |class=ui-button-green}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-green">Foo</span>]]</span>

{{Clickable button|Foo|category=no |class=ui-button-green}} → Foo
```
Foo
```

Old button class blue

{{Clickable button 2|Foo|category=no |class=ui-button-blue}}

{{Clickable button 2|Foo|category=no |class=ui-button-blue}} → Foo

<span class="plainlinks clickbutton">[[Foo|<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-blue">Foo</span>]]</span>

{{Clickable button 2/sandbox|Foo|category=no |class=ui-button-blue}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-button-blue">Foo</span>]]</span>

{{Clickable button|Foo|category=no |class=ui-button-blue}} → Foo
```
Foo
```

Style

{{Clickable button 2|Foo|style=width:300px}}

{{Clickable button 2|Foo|style=width:300px}} → Foo

<span class="plainlinks clickbutton">[[Foo|<span class="mw-ui-button" style="width:300px">Foo</span>]]</span>

{{Clickable button 2/sandbox|Foo|style=width:300px}} → Foo

<span class="plainlinks clickbutton">[[Foo |<span class="mw-ui-button" style="width:300px">Foo</span>]]</span>

{{Clickable button|Foo|style=width:300px}} → Foo
```
Foo
```

Arbitrary class

{{Clickable button 2|Foo|class=center}}

{{Clickable button 2|Foo|class=center}} → Foo

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

{{Clickable button 2/sandbox|Foo|class=center}} → Foo

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

{{Clickable button|Foo|class=center}} → Foo
```
Foo
```

Bad page name

{{Clickable button 2|Foo<>Bar}}

{{Clickable button 2|Foo<>Bar}} → [[Foo<>Bar|Foo<>Bar]]

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

{{Clickable button 2/sandbox|Foo<>Bar}} → [[Foo<>Bar |Foo<>Bar]]

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

{{Clickable button|Foo<>Bar}} → Foo<>Bar

<span class="mw-ui-button ">Foo<>Bar</span>

Bad page name with URL specified

{{Clickable button 2|Foo<>Bar|url=http://www.example.com}}

{{Clickable button 2|Foo<>Bar|url=http://www.example.com}} → Foo<>Bar

<span class="plainlinks clickbutton">[http://www.example.com <span class="mw-ui-button">Foo<>Bar</span>]</span>

{{Clickable button 2/sandbox|Foo<>Bar|url=http://www.example.com}} → Foo<>Bar

<span class="plainlinks clickbutton">[http://www.example.com <span class="mw-ui-button">Foo<>Bar</span>]</span>

{{Clickable button|Foo<>Bar|url=http://www.example.com}} → Foo<>Bar
```
Foo<>Bar
```

Color set to red

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

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

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

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

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

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

<span class="mw-ui-button mw-ui-destructive">Foo</span>

Color set to green

{{Clickable button 2|Foo|color=green}}

{{Clickable button 2|Foo|color=green}} → Foo

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

{{Clickable button 2/sandbox|Foo|color=green}} → Foo

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

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

<span class="mw-ui-button mw-ui-constructive">Foo</span>

Color set to BLUE

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

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

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

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

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

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

Color set to red and class to blue

{{Clickable button 2|Foo|class=mw-ui-progressive |color=red}}

{{Clickable button 2|Foo|class=mw-ui-progressive |color=red}} → Foo

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

{{Clickable button 2/sandbox|Foo|class=mw-ui-progressive |color=red}} → Foo

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

{{Clickable button|Foo|class=mw-ui-progressive |color=red}} → Foo
```
Foo
```

URL only (alt)

{{Clickable button 2|URL=http://www.example.com}}

{{Clickable button 2|URL=http://www.example.com}} →
{{Clickable button 2/sandbox|URL=http://www.example.com}} →
{{Clickable button|URL=http://www.example.com}} → Button text
```
Button text
```

Brackets around 1st

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

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

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

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

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

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

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

progressive URL only

{{Clickable button 2|class=mw-ui-progressive |url=http://www.example.com}}

{{Clickable button 2|class=mw-ui-progressive |url=http://www.example.com}} → http://www.example.com

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

{{Clickable button 2/sandbox|class=mw-ui-progressive |url=http://www.example.com}} → http://www.example.com

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

{{Clickable button|class=mw-ui-progressive |url=http://www.example.com}} → Button text
```
Button text
```

brackets and pipe in label

{{Clickable button 2|[[Foobar|barfoo]]}}

{{Clickable button 2|[[Foobar|barfoo]]}} → [[barfoo|barfoo]]

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

{{Clickable button 2/sandbox|[[Foobar|barfoo]]}} → barfoo

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

{{Clickable button|[[Foobar|barfoo]]}} → barfoo

<span class="mw-ui-button ">[[Foobar|barfoo]]</span>

Help:Introduction to editing with Wiki Markup/1

{{Clickable button 2|Help:Introduction to editing with Wiki Markup/1|Editing|style=width:11em; margin-bottom:10px;}}

{{Clickable button 2|Help:Introduction to editing with Wiki Markup/1|Editing|style=width:11em; margin-bottom:10px;}} → Editing

<span class="plainlinks clickbutton">[[Help:Introduction to editing with Wiki Markup/1|<span class="mw-ui-button" style="width:11em; margin-bottom:10px;">Editing</span>]]</span>

{{Clickable button 2/sandbox|Help:Introduction to editing with Wiki Markup/1|Editing|style=width:11em; margin-bottom:10px;}}

→ Editing

<span class="plainlinks clickbutton">[[Help:Introduction to editing with Wiki Markup/1 |<span class="mw-ui-button" style="width:11em; margin-bottom:10px;">Editing</span>]]</span>

Template:RTT notice

{{Clickable button 2|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate] |color=blue}}

{{Clickable button 2|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases <span style="color:white;">Translate</span>] |color=blue}}

→ [[Translate|Translate]]

<span class="plainlinks clickbutton">[[[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases <span style="color:white;">Translate</span>]|<span class="mw-ui-button mw-ui-progressive">[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases <span style="color:white;">Translate</span>]</span>]]</span>

{{Clickable button 2/sandbox|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate] |color=blue}} → [[?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate |?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate]]
```
[[?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate |?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases Translate]]
```

{{Clickable button|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases <span style="color:white;">Translate</span>] |color=blue}}

→ Translate

<span class="mw-ui-button mw-ui-progressive">[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=%E0%B7%83%E0%B7%90%E0%B6%9A%E0%B7%92%E0%B6%BD%E0%B7%8A%E0%B6%BD:Clickable_button_2/testcases <span style="color:white;">Translate</span>]</span>

Template:RTT notice (alt)

{{Clickable button 2|[https://example.com Translate]|color=blue}}

{{Clickable button 2|[https://example.com Translate]|color=blue}} → [[Translate|Translate]]

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

{{Clickable button 2/sandbox|[https://example.com Translate]|color=blue}} → Translate

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

{{Clickable button|[https://example.com Translate]|color=blue}} → Translate

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

Brackets around 1st with nolink set

{{Clickable button 2|[[Wikipedia]]|link=no}}

{{Clickable button 2|[[Wikipedia]]|link=no}} → Wikipedia

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

{{Clickable button 2/sandbox|[[Wikipedia]]|link=no}} → Wikipedia

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

{{Clickable button|[[Wikipedia]]|link=no}} → Wikipedia
```
[[Wikipedia]]
```

TWA Portal 1

{{Clickable button 2|1=Start the adventure → |class=mw-ui-progressive |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

{{Clickable button 2|1=<span style="font-size: x-large;">Start the adventure →</span> |class=mw-ui-progressive |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

→ Start the adventure →

<span class="plainlinks clickbutton">[http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1 <span class="mw-ui-button mw-ui-progressive"><span style="font-size: x-large;">Start the adventure →</span></span>]</span>

{{Clickable button 2/sandbox|1=<span style="font-size: x-large;">Start the adventure →</span> |class=mw-ui-progressive |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

→ Start the adventure →

<span class="plainlinks clickbutton">[http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1 <span class="mw-ui-button mw-ui-progressive"><span style="font-size: x-large;">Start the adventure →</span></span>]</span>

{{Clickable button|1=Start the adventure → |class=mw-ui-progressive |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}} → Start the adventure →
```
Start the adventure →
```

TWA Portal 2

{{Clickable button 2|Start the adventure →|class=mw-ui-progressive |style=font-size: x-large; |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

{{Clickable button 2|Start the adventure →|class=mw-ui-progressive |style=font-size: x-large; |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

→ Start the adventure →

<span class="plainlinks clickbutton">[http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1 <span class="mw-ui-button mw-ui-progressive" style="font-size: x-large;">Start the adventure →</span>]</span>

{{Clickable button 2/sandbox|Start the adventure →|class=mw-ui-progressive |style=font-size: x-large; |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}}

→ Start the adventure →

<span class="plainlinks clickbutton">[http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1 <span class="mw-ui-button mw-ui-progressive" style="font-size: x-large;">Start the adventure →</span>]</span>

{{Clickable button|Start the adventure →|class=mw-ui-progressive |style=font-size: x-large; |url=http://en.wikipedia.org/wiki/WP:TWA/1/Start?tour=twa1}} → Start the adventure →
```
Start the adventure →
```