Template:Clickable button 2/testcases

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.

BlankEdit

{{Clickable button 2}}
  • {{Clickable button 2}}
  • {{Clickable button 2/sandbox}}
  • {{Clickable button}}Button text
    <span class="mw-ui-button ">Button text</span>

No linkEdit

{{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}}
    <span class="mw-ui-button "></span>

nolink setEdit

{{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
    <span class="mw-ui-button ">bar</span>

1st set nil; 2nd unsetEdit

{{Clickable button 2|}}
  • {{Clickable button 2|}}
  • {{Clickable button 2/sandbox|}}
  • {{Clickable button|}}
    <span class="mw-ui-button "></span>

nolink and URL both setEdit

{{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
    <span class="mw-ui-button ">bar</span>

nolink and URL both set (alt)Edit

{{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">[[Template: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">[[Template: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
    <span class="mw-ui-button ">Button text</span>

nolink and URL both set (alt) with nowikiEdit

{{Clickable button 2|link=no|url=<nowiki>http://www.example.com</nowiki>}}
  • {{Clickable button 2|link=no|url='"`UNIQ--nowiki-00000000-QINU`"'}}http://www.example.com
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button">'"`UNIQ--nowiki-00000000-QINU`"'</span>]]</span>
  • {{Clickable button 2/sandbox|link=no|url='"`UNIQ--nowiki-00000000-QINU`"'}}http://www.example.com
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button">'"`UNIQ--nowiki-00000000-QINU`"'</span>]]</span>
  • {{Clickable button|link=no|url='"`UNIQ--nowiki-00000000-QINU`"'}}Button text
    <span class="mw-ui-button ">Button text</span>

nolink, URL, and label all setEdit

{{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
    <span class="plainlinks clickbutton"><span class="mw-ui-button">Foobar</span></span>
  • {{Clickable button|2=Foobar|link=no|url=http://www.example.com}}Button text
    <span class="mw-ui-button ">Button text</span>

nolink, URL, and label all set (alt)Edit

{{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
    <span class="mw-ui-button ">Foobar</span>

Link onlyEdit

{{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
    <span class="mw-ui-button ">Foo</span>

URL onlyEdit

{{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
    <span class="mw-ui-button ">Button text</span>

URL placed as labelEdit

{{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
    <span class="mw-ui-button ">http://www.example.com</span>

Link and displayEdit

{{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
    <span class="mw-ui-button ">Foo</span>

URL and displayEdit

{{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
    <span class="mw-ui-button ">Foo</span>

URL and display (alt)Edit

{{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
    <span class="mw-ui-button ">Button text</span>

ConstructiveEdit

{{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
    <span class="mw-ui-button ">Foo</span>

ProgressiveEdit

{{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
    <span class="mw-ui-button ">Foo</span>

DestructiveEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Same page linkEdit

{{Clickable button 2|Template:Clickable button 2/testcases}}
  • {{Clickable button 2|Template:Clickable button 2/testcases}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button" style="background-color:#CCC;color:#666">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button 2/sandbox|Template:Clickable button 2/testcases}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases |<span class="mw-ui-button" style="background-color:#CCC;color:#666">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button|Template:Clickable button 2/testcases}}Template:Clickable button 2/testcases
    <span class="mw-ui-button ">Template:Clickable button 2/testcases</span>

Same page constructiveEdit

{{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-constructive}}
  • {{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-constructive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-constructive" style="background-color:#2962CB;color:#fff">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button 2/sandbox|Template:Clickable button 2/testcases|class=mw-ui-constructive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-constructive" style="background-color:#2962CB;color:#fff">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button|Template:Clickable button 2/testcases|class=mw-ui-constructive}}Template:Clickable button 2/testcases
    <span class="mw-ui-button ">Template:Clickable button 2/testcases</span>

Same page progressiveEdit

{{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-progressive}}
  • {{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-progressive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-progressive" style="background-color:#2962CB;color:#fff">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button 2/sandbox|Template:Clickable button 2/testcases|class=mw-ui-progressive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-progressive" style="background-color:#2962CB;color:#fff">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button|Template:Clickable button 2/testcases|class=mw-ui-progressive}}Template:Clickable button 2/testcases
    <span class="mw-ui-button ">Template:Clickable button 2/testcases</span>

Same page destructiveEdit

{{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-destructive}}
  • {{Clickable button 2|Template:Clickable button 2/testcases|class=mw-ui-destructive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases|<span class="mw-ui-button mw-ui-destructive" style="background-color:#A6170F">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button 2/sandbox|Template:Clickable button 2/testcases|class=mw-ui-destructive}}Template:Clickable button 2/testcases
    <span class="plainlinks clickbutton">[[Template:Clickable button 2/testcases |<span class="mw-ui-button mw-ui-destructive" style="background-color:#A6170F">Template:Clickable button 2/testcases</span>]]</span>
  • {{Clickable button|Template:Clickable button 2/testcases|class=mw-ui-destructive}}Template:Clickable button 2/testcases
    <span class="mw-ui-button ">Template:Clickable button 2/testcases</span>

Class caseEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Old button class redEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Old button class greenEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Old button class blueEdit

{{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
    <span class="mw-ui-button ">Foo</span>

StyleEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Arbitrary classEdit

{{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
    <span class="mw-ui-button ">Foo</span>

Bad page nameEdit

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

{{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
    <span class="mw-ui-button ">Foo<>Bar</span>

Color set to redEdit

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

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

{{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
    <span class="mw-ui-button ">Foo</span>

Color set to red and class to blueEdit

{{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
    <span class="mw-ui-button mw-ui-destructive">Foo</span>

URL only (alt)Edit

{{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
    <span class="mw-ui-button ">Button text</span>

Brackets around 1stEdit

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

{{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
    <span class="mw-ui-button ">Button text</span>

brackets and pipe in labelEdit

{{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/1Edit

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

{{Clickable button 2|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template:Clickable_button_2/testcases <span style="color:white;">Translate</span>]|color=blue}}
  • {{Clickable button 2|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template: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=Template: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=Template: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=Template:Clickable_button_2/testcases <span style="color:white;">Translate</span>]|color=blue}}[[?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template:Clickable_button_2/testcases Translate |?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template:Clickable_button_2/testcases Translate]]
    <span class="plainlinks clickbutton">[[?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template:Clickable_button_2/testcases <span style="color:white;">Translate</span> |<span class="mw-ui-button mw-ui-progressive">?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template:Clickable_button_2/testcases <span style="color:white;">Translate</span></span>]]</span>
  • {{Clickable button|1=[https://en.wikipedia.org/w/index.php?title=Special:ContentTranslation&campaign=contributionsmenu&from=en&to=?&page=Template: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=Template:Clickable_button_2/testcases <span style="color:white;">Translate</span>]</span>

Template:RTT notice (alt)Edit

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

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

TWA Portal 1Edit

{{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}}
  • {{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=<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="mw-ui-button "><span style="font-size: x-large;">Start the adventure →</span></span>

TWA Portal 2Edit

{{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 →
    <span class="mw-ui-button ">Start the adventure →</span>