Template talk:Clickable button

  1. Home
  2. Wiki

Untitled 2012 comment

[edit]

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.


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"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:


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


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"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.org/wiki/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: -- Rillke (talk) 15:52, 12 October 2012 (UTC)[reply]
Hope this can help, User:Valchemishnu/sandbox
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]

Support the semantic button styles (mw-ui-{progressive,destructive})

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]

OOjs UI

[edit]

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]

Colors

[edit]

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]

Template on Slovak Wikipedia

[edit]

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]

Difference between this and Template:Clickable button 2

[edit]

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.org/wiki/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.org/wiki/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.org/wiki/Main_Page}} → External link and some additional text

Template-protected edit request on 17 June 2020

[edit]

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]

Template-protected edit request on 5 April 2021

[edit]

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]

Merge with the Clickable Button 2

[edit]

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]

Template-protected edit request (TfD)

[edit]

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]

Template-protected edit request on 19 November 2021

[edit]

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]

Module:Clickable button 2

[edit]

@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]

Merge with Clickable button 2

[edit]

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]

Removal of mw-ui-constructive aka green color buttons

[edit]

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.

For reference, green buttons are technically still supported through CSS class ui-button-green, but it's deprecated and discouraged – see lines 200–205 and Category:Pages using old style ui-button-color.

—⁠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]

Assistance

[edit]

Hi @Hike395, I was wondering, I literally learnt Lua the past three hours just so I could write this module's sandbox Module:Clickable button/sandbox, now I've tried my best, but I get the error seen at Template:Clickable button/testcases which calls the module directly. Can you help in any way? It's basically gonna do the same thing as Module:Clickable button but instead use the classes etc. to make a Codex fake button since mw-UI is in maintenance mode and will soon be deprecated.

Could you assist? 😄 waddie96 ★ (talk) 23:19, 13 September 2025 (UTC)[reply]

Wait managed to fix it waddie96 ★ (talk) 23:26, 13 September 2025 (UTC)[reply]
Is there any chance you could assist me in checking it operates properly? I seem to have one or two cases it doesn't work and struggling to fix them;. waddie96 ★ (talk) 07:54, 14 September 2025 (UTC)[reply]
All fixed now it seems! waddie96 ★ (talk) 06:59, 17 September 2025 (UTC)[reply]

Merge /sandbox update – Change to use Codex button

[edit]

Hi there, I plan to make an edit request to merge the /sandbox module. I've tried my best at my first Lua go, and I think I've ironed everything out. Throwback to my assembly and BASIC days as a child 🧒 then I chose a different career path. So the concepts were all there, I just didn't know how to put it into the Lua scripting language. Anyway, got it. Just need to check all use-cases.

I recommend we upgrade to Codex since OOUI is not deprecated per se, but there's a notice in the debug/console browser log to say that it is and that the devs who are using the components in their MediaWiki core code should change: This page is using the deprecated ResourceLoader module "mediawiki.ui.button". [1.41] Please use Codex. See migration guidelines: https://www.mediawiki.org/wiki/Codex/Migrating_from_MediaWiki_UI.

In addition, could someone watching this please also just have a squizz through the code and give tips/feedback. I'd appreciate it! waddie96 ★ (talk) 22:15, 17 September 2025 (UTC)[reply]

Thank you for using the sandbox and the testcases page. Please convert these test cases to use the normal test case templates so that there is a standardized way to compare the behavior of the live and sandbox templates. The format used for the test cases at the bottom of the page is a good one. Convert the ";" markup to real headers so that test cases can be linked from discussions. – Jonesey95 (talk) 14:10, 18 September 2025 (UTC)[reply]
Yeah I will, I'm just not done checking the output of the sandbox yet. waddie96 ★ (talk) 15:14, 18 September 2025 (UTC)[reply]
You can use the case number to refer to them waddie96 ★ (talk) 15:14, 18 September 2025 (UTC)[reply]
Not all cases have numbers. Some have letters. Please just use regular headers, and make sure that a test case template is used. – Jonesey95 (talk) 16:28, 18 September 2025 (UTC)[reply]
Nice work with the /testcases updates. When you have the /sandbox working as well as or better than the live template, post again here asking for feedback and explain the changes you have made. – Jonesey95 (talk) 19:58, 18 September 2025 (UTC)[reply]
Anyone who is watching this page, the module Module:Clickable button/sandbox is done. If you'd like to check out the Template:Clickable button/testcases waddie96 ★ (talk) 18:47, 22 September 2025 (UTC)[reply]
The sandbox versions of the "URL button" test cases appear to be broken. The "Disabled via parameter" test clicks through to example.org; is that intentional? Why would a disabled button work? That is as far as I got on the page. – Jonesey95 (talk) 01:41, 23 September 2025 (UTC)[reply]
Yeh, I messaged and then decided to overhall for performance 🙈 so it has been messy whilst I've been editing it in an external code editor (CodeMirror is terribly slow, laggy, no IntelliSense, no symbol editor, no language server etc. etc.) waddie96 ★ (talk) 04:29, 23 September 2025 (UTC)[reply]
I'm done now, #Disabled via parameter is working now. waddie96 ★ (talk) 04:30, 23 September 2025 (UTC)[reply]
And it was because I was in the middle of resolving for the '1' as a boolean rather than a string, since Module:Arguments wasn't resolving it with something like Module:Yesno as I thought it would. Sorted now though waddie96 ★ (talk) 04:31, 23 September 2025 (UTC)[reply]
There are three nonexistent categories on the testcases page as well as Category:Pages using duplicate arguments in template calls, which should be fixed. I have to go on a short wikibreak; I will leave it to others to provide more feedback. Is there an explanation somewhere of the new parameters? Existing parameters should be in the test cases as well, if changing the way they work is being proposed. – Jonesey95 (talk) 05:34, 23 September 2025 (UTC)[reply]
The non existent categories are from me testing the |category= argument which is a legacy parameter that categorizes the button into a custom category, we can ignore it, but that’s why they’re there. Yes the doc for the new module I made at c:Module:Clickable button/doc. Sorry should have linked that. The duplicate calls is probably from the fact that I tweaked that the testcases compare the current module with an older version from 2 days ago instead of the current live module. I’ll swop it back. waddie96 ★ (talk) 07:13, 23 September 2025 (UTC)[reply]
Five examples from live templates can be seen on the testpage. My issue/gripe is the gigantic buttons that the Wiktionary redirect templates have created. It's ridiculous! The limit on button size/contents is 40 characters or less, but in addition buttons aren't supposed to be used for links that navigation you to another page, that is what a link is for. They're meant to be for actions such as replying to acomment or starting a new comment. Like the 'Reqeust edit' edit-protected template button.
I've had to implement a new class .cdx-button--word-wrap for backward compatibility to apply to these cases so they fit, but I don't want to enable it by default as this interferes with the developers' design/aim/style system. It wont' mess with their buttons on the screen, however, since this button's CSS selectors do are specific enough to select elements created by this template only.
The .cdx-button--word-wrap class changes the following attributes: max-width: none; white-space: normal; word-wrap: break-word; and should only be implemented if updating all the transclusions is prohibitive/improbable/unrealistic. Anyway, the module will have to detect what template is transcluding it, and pass this class to its parent element when it's transcluded onto one of those templates. Since this template can't pass the class as I see on it's /doc page it's substituted (??). waddie96 ★ (talk) 08:23, 23 September 2025 (UTC)[reply]
See the design system specifications for a button from Codex at their documentation site. waddie96 ★ (talk) 08:23, 23 September 2025 (UTC)[reply]
I'm making a breaking change. waddie96 ★ (talk) 23:00, 29 September 2025 (UTC)[reply]