Template talk:Clickable button Source: en.wikipedia.org/wiki/Template_talk:Clickable_button

This template does not require a rating on Wikipedia's content assessment scale. It is of interest to the following WikiProjects:

Templates This template (like all templates) is within the scope of WikiProject Templates, a group dedicated to improving the maintenance of Wikipedia's templates. This particular template is especially important to the project because it is used in the maintenance of other templates. If you would like to participate, please visit the project page, where you can join the discussion and see a list of open tasks.TemplatesWikipedia:WikiProject TemplatesTemplate:WikiProject TemplatesTemplates

You should wrap the link around the button. Otherwise parts of the area won't direct the user to the target, which can be very confusing. -- Rillke (talk) 12:11, 9 September 2012 (UTC)[reply]

The template accepts a piped link in one parameter:

{{Clickable button|[[Talk:Main Page|Main page talk page]]}}

The above produces Main page talk page

If it's called with a piped link then I don't know a way to wrap the link around the button and display the link text inside. If the link target and text were in separate parameters then the system at Wikipedia:Teahouse/Questions#Clickable button (permanent link) could be used. Here are fully clickable buttons formatted with a url in the first and a wikilink in the second:

Main page talk page [[Talk:Main Page|Main page talk page]]

PrimeHunter (talk) 12:34, 9 October 2012 (UTC)[reply]

Please check User:Vanischenu/sandbox. I hope it is solved.

• {{User:Vanischenu/sandbox|talk:Main page}} ---> Kaniyambetta is in Kalpetta State Assembly constituency. Its coordinates is 11°42'N, 76°6'E, 11°42'22.00"N, 76°6'3.67"E

Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

• {{User:Vanischenu/sandbox|talk:Main page|Main page talk page}} ---> Kaniyambetta is in Kalpetta State Assembly constituency. Its coordinates is 11°42'N, 76°6'E, 11°42'22.00"N, 76°6'3.67"E

Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

···Vanischenu^「m/_Talk」 14:56, 11 October 2012 (UTC)[reply]

It depends what is wanted from the template. It works with one page name, or two page names as separate parameters. It doesn't work for a piped link in one parameter, or an external link in one or two parameters:

• {{User:Vanischenu/sandbox|[[Talk:Main Page|Main page talk page]]}} ---> Kaniyambetta is in Kalpetta State Assembly constituency. Its coordinates is 11°42'N, 76°6'E, 11°42'22.00"N, 76°6'3.67"E

Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

• {{User:Vanischenu/sandbox|[http://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Talk:Main_Page Main page talk page]}} ---> Kaniyambetta is in Kalpetta State Assembly constituency. Its coordinates is 11°42'N, 76°6'E, 11°42'22.00"N, 76°6'3.67"E

Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

• {{User:Vanischenu/sandbox|http://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Talk:Main_Page|Main page talk page}} ---> Kaniyambetta is in Kalpetta State Assembly constituency. Its coordinates is 11°42'N, 76°6'E, 11°42'22.00"N, 76°6'3.67"E

Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

The current {{Clickable button}} accepts piped links and external links as in the first and second example above:

• {{Clickable button|[[Talk:Main Page|Main page talk page]]}} ---> Main page talk page
• {{Clickable button|[http://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Talk:Main_Page Main page talk page]}} ---> Main page talk page

I don't know a way to make those two work for a fully clickable button. The third could be made to work if the template is told (or can figure out) whether the first parameter is a url or a page name. PrimeHunter (talk) 15:40, 11 October 2012 (UTC)[reply]

My response follows your enquiry. Yes, you'll have to use 2 params which would break backward compatibility if you use unnamed params. And it should also support external URLs. Therefore I made some more complicate stuff at commons:Template:Clickable button (from the beginning on). Nice idea this template. Before I used the raw HTML markup but it looked always messy. Thx -- Rillke (talk) 15:42, 11 October 2012 (UTC)[reply]

Check out Template:Clickable button/sandbox. Perhaps we could move that to {{Clickable button 2}} which could be fully clickable and wouldn't break old cases. Ryan Vesey 12:45, 12 October 2012 (UTC)[reply]

Does not work of external URIs, or do I miss something: Create this page -- Rillke (talk) 15:52, 12 October 2012 (UTC)[reply]

Hope this can help, User:Valchemishnu/sandbox

• |Talk:Main Page --> Talk:Main Page
• |Talk:Main Page | Main Page Talk Page --> Main Page Talk Page
• |url=https://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Talk:Main_Page | Main Page Talk Page --> Main Page Talk Page

Thank you.···Vanischenu^「m/_Talk」 18:34, 12 October 2012 (UTC)[reply]

Care to create clickable button 2 with the content from that? We can link it from the doc page here. Ryan Vesey 18:42, 12 October 2012 (UTC)[reply]

As you wish, Sir.···Vanischenu^「m/_Talk」 19:55, 12 October 2012 (UTC)[reply]

Created it >>···Vanischenu^「m/_Talk」 05:26, 13 October 2012 (UTC)[reply]

A better/alternate version is available at {{Clickable button 2/sandbox|Template:Clickable button 2/sandbox}}···Vanischenu^「m/_Talk」 04:41, 14 October 2012 (UTC)[reply]

Hey, thanks for using mw:Agora styles! By design this default Neutral button style doesn't stand out, so that you can have

This That Something else Do it

and have [Do it] as the "Call to action". So maybe the template could support a parameter for the additional semantics. Someone could and should update templates like {{Blue button}}, but the semantic styles are more future-proof. The underlying CSS styles are in a living style guide. -- S Page (WMF) (talk) 23:38, 3 July 2014 (UTC)[reply]

Updated example to reflect outcome of https://phabricator.wikimedia.org/T110555 resulting in consolidation into one primary, "advancing" button style (progressive) --VEckl (WMF) (talk) 23:04, 14 March 2016 (UTC)[reply]

Could this button be rewritten into OOjs UI style, which is supposed to replace old and unmaintained MediaWiki UI? E.g. cswiki already made the change. There is a nice conversation between me and mediawiki dev MatmaRex, where I found out MWUI is deprecated and there is a new OOUI (classes oo-ui-*) instead, which is intended to replace that old MWUI (classes mw-ui-*) and oldest UI (classes ui-*). --Dvorapa (talk) 09:12, 21 November 2015 (UTC)[reply]

Are there more colors except red, green, blue and white? Wetit🐷 0 22:54, 7 September 2016 (UTC)[reply]

No, you have to edit the template. If someone could explain how to, it would be interesting to understand code and for testing purpose, or to create user template. — Preceding unsigned comment added by 2A01:E35:8A8D:FE80:F968:7669:E0B2:AE4A (talk) 12:29, 1 December 2016 (UTC)[reply]

Hi, we have similar template on Slovak Wikipedia for clickable button, but it only works in desktop view, not the mobile one. I am not a tech kind of person so can you maybe have a look at it what is missing there? Thanks a lot, --Luky001 (talk) 11:45, 22 March 2019 (UTC)[reply]

@Luky001: In [1] you changed it completely from being a translation of our template. Why did you change it and where did you get all that code? I don't want to track which of all those oo-ui classes does what in desktop versus mobile. PrimeHunter (talk) 11:21, 28 March 2019 (UTC)[reply]

@PrimeHunter: Hi, I took it from Czech Wikipedia because it seemed to me more understandable and thererefore easier to translate into Slovak. I was already solving the issue that the button was working in "Show preview" while editing but normally was displaying just as normal text with a hyperlink. After adding this code to sk:MediaWiki:Common.js it is working on the web.

mw.hook('wikipage.content').add(function() {
    if ((mw.loader.getState('oojs-ui') === 'registered') && ($('.oo-ui-widget').length)) {
        mw.loader.using(['oojs-ui']);
    }
});

I was told that this same code should make template work for mobile versions when added to sk:MediaWiki:Mobile.js, but the user is not sure if it is going to work, so he advised me rather to do some simpler version in sk:MediaWiki:Mobile.css. Note: Template is not working in mobile view on Czech Wikipedia as well. --Luky001 (talk) 16:53, 28 March 2019 (UTC)[reply]

@Luky001: It works when I run the above JavaScript in the Firefox browser console while viewing sk:Šablóna:Klikateľné tlačidlo in the mobile version. But it may not be popular to run extra JavaScript for all mobile users just to style a button. PrimeHunter (talk) 20:01, 28 March 2019 (UTC)[reply]

@PrimeHunter: For me it doesn't work in Firefox. But the question is how you make it work in mobile view here at English Wikipedia. Is it somewhere in the code of the template or are there any outer conditions affecting it? --Luky001 (talk) 21:57, 28 March 2019 (UTC)[reply]

@Luky001: The outer conditions are present in MediaWiki and don't require anything in the wiki. Special:ExpandTemplates shows that

{{Clickable button|Button text|color=white}}
{{Clickable button|Button text|color=blue}}
{{Clickable button|Button text|color=red}}

produces:

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

This code also works at Slovak Wikipedia. PrimeHunter (talk) 22:07, 28 March 2019 (UTC)[reply]

@PrimeHunter: That I know and I used this code before having this template. Still, with this template I find it more easy to change the type and size and what is the most important, when having URL link in this code, it will show there the icon of hyperlink, which doesn't look nice when having a button. This template solves these things. --Luky001 (talk) 22:36, 28 March 2019 (UTC)[reply]

It's not clear what the difference is. Can we add something to the documentation on that? Sdkb (talk) 19:37, 16 January 2020 (UTC)[reply]

• Good point, let´s try to collect something, here my experiences --Escalatr (talk) 09:48, 9 June 2020 (UTC)[reply]
  • {{Clickable button}} creates a clickable button in the first place (without a function by default, can be misleading), {{Clickable button 2}} always creates a link styled like a button
  • {{Clickable button 2}} is done through Lua Module (more elegant solution)
  • {{Clickable button 2}} has a parameter for URLs, no need to wrap in a wikilink, better handling of links (in my opinion)
    • Example internal link:
      [[Main Page | {{Clickable button| Main Page}} ]] → [[Main Page | Main Page ]] and some additional text
      vs. {{Clickable button 2|Main Page}} → Main Page and some additional text
    • Example external link:
      {{Clickable button|url=https://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Main_Page | External link}} → External link and some additional text (notice: there is no blank space after the link icon!)
      or {{Clickable button|[https://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Main_Page External link]}} → External link and some additional text (notice: now the link text is styled as normal wiki link!)
      vs. {{Clickable button 2|External link|url=https://en.wikipedia.orghttps://demo.azizisearch.com/lite/wikipedia/page/Main_Page}} → External link and some additional text

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

Add the following to the top of the page:

<noinclude>{{For|the more commonly used clickable button|Template:Clickable button 2}}</noinclude>

This might help people delving into buttons for the first time more easily figure out where to go. As always, make sure the </noinclude> ends on the same line as the first line of the template code. {{u|Sdkb}} ^talk 17:30, 17 June 2020 (UTC)[reply]

 Partly done: Added to the top of the doc subpage, which seems to be a bit of a convention. Mdaniels5757 (talk) 21:40, 17 June 2020 (UTC)[reply]

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

Can the link to "your own user subpage" be linked to WP:UP#SUB? ― Qwerfjkl|✉   20:14, 5 April 2021 (UTC)[reply]

 Not done. That would be a change to Module:High-use. Make a request there. Nardog (talk) 20:21, 5 April 2021 (UTC)[reply]

Actually I've just changed the link in Module:High-use. The previous link Wikipedia:Subpages#How to create user subpages seems to have never existed. Nardog (talk) 20:27, 5 April 2021 (UTC)[reply]

I think this template needs to be merged with the Clickable Button 2 because they have the same functionality. What do you think? --littleb2009 (^she/_her) (talk • contribs) 16:54, 17 June 2021 (UTC)[reply]

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

I'm going WP:BOLD and listing the template at WP:TfD for a merger with with the other clickable button, Template:Clickable button 2. Could an template editor add the TfD notice to it? --littleb2009 (^she/_her) (talk • contribs) 00:21, 18 June 2021 (UTC)[reply]

P.S. Since I don't want anyone to break Wikipedia, remember to use <noinclude></noinclude> tags!

 Done * Pppery * _{it has begun...} 13:56, 18 June 2021 (UTC)[reply]

This edit request has been answered. Set the |answered= parameter to no to reactivate your request.

Replace {{{color|white}}} with {{{color|{{{colour|white}}}}}} Qwerfjkltalk 23:43, 19 November 2021 (UTC)[reply]

 Done Seems harmless but kind of pointless, given the merger of this template with {{clickable button 2}}, but I will AGF. – Jonesey95 (talk) 23:58, 19 November 2021 (UTC)[reply]

@Primefac can you move Module:Clickable button 2 to match this template's name? Gonnym (talk) 19:23, 5 March 2024 (UTC)[reply]

No, mainly because it's being invoked and called from other places. Primefac (talk) 19:30, 5 March 2024 (UTC)[reply]

I reverted the recent change because I was seeing things like this

[[Wikipedia:WikiProject Women in Red/Meetup/300|Art & Feminism]]

on pages like Wikipedia:WikiProject Women in Red/Meetup/293 — Martin (MSGJ · talk) 19:59, 5 March 2024 (UTC)[reply]

MSGJ, are those the only places? Because if so I'm going to change their module and restore. Primefac (talk) 20:03, 5 March 2024 (UTC)[reply]

That should be all, thanks — Martin (MSGJ · talk) 20:05, 5 March 2024 (UTC)[reply]

Well there are hundreds of other uses of this template (e.g. Wikipedia:WikiProject Women in Red/Meetup/273) that don't use the module — Martin (MSGJ · talk) 20:12, 5 March 2024 (UTC)[reply]

Oh ffs. Those are supposed to work, but the <small>...</small> throws everything off...

(orig) {{Clickable button|Alphabet run X, Y & Z|color=white}} → [[Wikipedia:WikiProject Women in Red/Meetup/271|Alphabet run X, Y & Z]]

(with small) {{Clickable button 2|Alphabet run X, Y & Z|color=white}} → [[Wikipedia:WikiProject Women in Red/Meetup/271|Alphabet run X, Y & Z]]

(no small) {{Clickable button 2|Alphabet run X, Y & Z|color=white}} → Alphabet run X, Y & Z

Primefac (talk) 20:16, 5 March 2024 (UTC)[reply]

After your changes, the colour of the link has changed from blue to black. I think I prefer the blue, as we use that throughout Wikipedia. — Martin (MSGJ · talk) 10:37, 6 March 2024 (UTC)[reply]

That's a design feature that I am not dealing with here. Primefac (talk) 21:17, 6 March 2024 (UTC)[reply]

Hmm. That's a fairly significant change and I think it's reasonable to ask where this was discussed, as I couldn't find this aspect came up in the 2021 TfD at all. I guess it's not the end of the world, but what would be the CSS needed to turn it back to blue? — Martin (MSGJ · talk) 13:30, 7 March 2024 (UTC)[reply]

Clickable button 2 never had bluelinks, and CB1 wasn't supposed to be linked in the first place (people found a hack to get wikilinks in it). Primefac (talk) 14:51, 7 March 2024 (UTC)[reply]

The <small>...</small> issue has been dealt with, and I don't see any other tags that would be borking things, so I'm going to re-implement the merge. Primefac (talk) 21:17, 6 March 2024 (UTC)[reply]

The small issue came up again today for some reason.

{{clickable button|<small>[[Wikipedia:WikiProject Women in Red/Ideas|Ideas]]</small>}} produces [[Wikipedia:WikiProject Women in Red/Ideas|Ideas]] — Martin (MSGJ · talk) 05:01, 21 March 2024 (UTC)[reply]

Looks like you fixed it here? Primefac (talk) 07:19, 21 March 2024 (UTC)[reply]

I did, but I thought you had fixed the module so that small would not faze it? I'm worried there will be others will small in them. — Martin (MSGJ · talk) 09:58, 21 March 2024 (UTC)[reply]

That was the only other place in the module using a small tag, so we should be good. Primefac (talk) 10:24, 21 March 2024 (UTC)[reply]

Okay that's reassuring. But what I don't understand is that "small" was there for at least a month and it was definitely displaying correctly until recently. And I couldn't see any recent edits to the module. — Martin (MSGJ · talk) 10:35, 21 March 2024 (UTC)[reply]

It was tied to an "extra" param. I suppose before now it hadn't been used/triggered. Primefac (talk) 10:40, 21 March 2024 (UTC)[reply]

The CSS class mw-ui-constructive was removed in phab:T146923, phab:T155203, and other related tickets. Using this CSS class doesn't change a {{clickable button}} visually anymore:

no CSS class class=mw-ui-constructive

Should something be done with the existing support for it in the module? See lines 100–102 and line 132.

—⁠andrybak (talk) 22:25, 7 May 2025 (UTC)[reply]

Probably good to remove ghosts in the code to avoid compounded errors down the road. It should be as simple as removing those lines but I'll have to take some time to make sure of that first. Primefac (talk) 13:46, 17 May 2025 (UTC)[reply]

I've implemented removal of mw-ui-constructive in the sandbox with some clean-up of code comments. The effect can be seen in test case "Color set to green".

Would a new tracking category similar to Category:Pages using old style ui-button-color be helpful? Something like Special:Diff/1290851444. —⁠andrybak (talk) 14:00, 17 May 2025 (UTC)[reply]

I like what you've written thus far, and have added support for |colour= per § Template-protected edit request on 19 November 2021 :) HouseBlaster (talk • he/they) 22:12, 15 June 2025 (UTC)[reply]