Template talk:Button

Shouldn't this template support an alt parameter to set the text to be rendered on mouse-over (and to be used by screen-readers for accessibility), or can/will a screen reader read the button text? —[AlanM1(talk)]— 03:02, 17 March 2013 (UTC)Reply

It will read the button text. — Edokter (talk) — 10:10, 17 March 2013 (UTC)Reply

Can we organise a new style for the button? Provided that we are changing the interface of buttons on Wikipedia to look more coloured, such as like:

Button Or Button

We are moving away from the old style that looked like:

Button

Can we reflect these changes on the button template as well? (Remember that this will be a breaking change to the look of the button!)

Provide your say below! Thank you! DSCrowned^(talk) 05:39, 9 July 2015 (UTC)Reply

They've not all turned facebooky. The important ones, like the "Go" and "Search" buttons in the left margin, the "Search" button at Special:Contributions or "Go" at Special:Watchlist are all still proper colours, black on silver. --Redrose64 (talk) 11:08, 9 July 2015 (UTC)Reply

Yes, I see this, but the design team for MediaWiki may change this to the new design in the future. It has been specified in MediaWiki ui and interfaces are now steadily shifting to the new look. For newcomers, they will swiftly come across new pages which have the new style, because those pages are meant for newcomers. DSCrowned^(talk) 04:05, 10 July 2015 (UTC)Reply

"This template provides a "clickable button" formatting style for text. This button is not clickable"

Seems contradictory. — Preceding unsigned comment added by 2A01:E35:8A8D:FE80:DC2A:4CC2:F69C:9E36 (talk) 03:26, 13 January 2017 (UTC)Reply

Changing the markup to be semantically correct in a recent edit [1] (<kbd>...</kbd> instead of <span>...</span>) also had the consequence of turning the regular text on the button into monospace font, which doesn't match with real buttons this template is supposed to represent. I've corrected this in the sandbox: [2]. - Evad37 [talk] 04:34, 13 January 2018 (UTC)Reply

 Done in main template - Evad37 [talk] 16:20, 29 January 2018 (UTC)Reply

In Dec 2017 the Save changes button was renamed Publish changes across all wikis. There was a lack of effective coordination to implement the necessary updates to most of our help pages on en.wiki. I have since tried my best to make up for this. But some changes elude me. Three years ago it was observed that we needed to change the button colour, but I can find no option to set this as a parameter today. Could someone more technical help me get Template:EditOptions to match what we now see in real life editing so that our Help pages like this one look right? If not, I'm just going to delete it and shove in a real screenshot instead. Pinging @DSCrowned: and @Redrose64: who discussed this 3 years ago. Regards, Nick Moyes (talk) 13:29, 26 February 2018 (UTC)Reply

 Done, to emulate the new-style buttons you need to use {{clickable button}} instead of {{button}} - Evad37 [talk] 02:27, 28 February 2018 (UTC)Reply

Thank you - that's really helpful. Nick Moyes (talk) 10:40, 2 March 2018 (UTC)Reply

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

This template set background-color: without setting color: which is an accessibility issue for dark Wikipedia color schemes. Please add color: {{{fgcolor|#000}}}; after background-color: {{{bgcolor|#F2F2F2}}};— Dispenser 03:10, 12 March 2018 (UTC)Reply

 Done — xaosflux ^Talk 11:30, 12 March 2018 (UTC)Reply

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

Please add the following to the top of the page:

<noinclude>{{Hatnote|This template is a non-clickable button. For the most common clickable button, see [[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

Sdkb, why not just add it to the top of documentation? —⁠andrybak (talk) 20:39, 17 June 2020 (UTC)Reply

Andrybak, I've seen hatnotes both in the documentation and above the template itself, so I'm not sure if there's a set standard, but I think putting it at the top would be a little more prominent. {{u|Sdkb}} ^talk 20:42, 17 June 2020 (UTC)Reply

There isn't really a standard, but where there is a doc subpage, it seems to me that the hatnotes are usually there (see, e.g., {{cn}}). I've done the same here. --Mdaniels5757 (talk) 21:44, 17 June 2020 (UTC)Reply

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

Replace background-image: linear-gradient(to bottom, {{{bgcolor1|#FCFCFC}}}, {{{bgcolor2|#E0E0E0}}});
With {{#if:{{{bgcolor|}}}||background-image: linear-gradient(to bottom, {{{bgcolor1|#FCFCFC}}}, {{{bgcolor2|#E0E0E0}}}); }}

Summary: encompass the background-image clause with an if statement to check if there is a bgcolor defined. Currently, defining a bgcolor does not actually change the background color since this clause overrides it.

Rafaelmanman (talk) 18:48, 12 August 2024 (UTC)Reply

 Not done: please make your requested changes to the template's sandbox first; see WP:TESTCASES. – Jonesey95 (talk) 20:42, 12 August 2024 (UTC)Reply

@Jonesey95  Done The edit has now been made to the sandbox. Rafaelmanman (talk) 22:34, 12 August 2024 (UTC)Reply

Thank you. And now for the testcases page. If you need help setting one up, let me know. I find {{testcase table}} to be useful. Please create a testcase showing the use of bgcolor, bgcolor1, and bgcolor2 in both the live and sandbox templates. – Jonesey95 (talk) 22:40, 12 August 2024 (UTC)Reply

Ah I see, I didn't realize you had wanted a test cases page; I'll get started on one. Rafaelmanman (talk) 01:13, 13 August 2024 (UTC)Reply

 Done: I've now created the testcases here. The prevalent ones are titled "Background color" (#3), and "Background gradient" (#-3). Let me know if you want anything else completed or would rather they be changed to testcase tables, be it for the sake of the request or just general upkeeping. Thank you very much for your help. Rafaelmanman (talk) 14:31, 13 August 2024 (UTC)Reply

Just a note: I've changed the sandbox after I noticed it was registering differently when it should have been the same on the testcases. The change is minimal, simply moving the space at the end of the new version to after the parser function.Rafaelmanman (talk) 16:25, 13 August 2024 (UTC)Reply

 Done. Thanks. The testcases helped me understand the problem (bgcolor was not being applied if it was defined). – Jonesey95 (talk) 22:52, 15 August 2024 (UTC)Reply

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

Kindly merge changes at Template:Button/sandbox for dark mode compatibility. You can see testcases. The colors are slightly different but it shouldn't be a big problem (had to approximate with css tokens). —Matrix(!) {user - talk? - _uselesscontributions} 06:45, 28 August 2024 (UTC)Reply

@Matrix, nitpick, but shouldn't the gradient run the other way in dark mode ? (maybe using template styles would be a good usecase here). Sohom (talk) 13:13, 28 August 2024 (UTC)Reply

@Sohom Datta: The drawback with using templatestyles is that it won't work well if the bgcolor1 or bgcolor2 parameters are defined —Matrix(!) {user - talk? - _uselesscontributions} 09:50, 30 August 2024 (UTC)Reply

 Done Further edits to the sandbox are welcome to address nitpicks. – Jonesey95 (talk) 15:25, 28 August 2024 (UTC)Reply

How is this a keyboard input? I think this template should use <div> <span>. Sapphaline (talk) 09:29, 6 September 2025 (UTC)Reply

See sandbox. Sapphaline (talk) 09:31, 6 September 2025 (UTC)Reply

@Jonesey95:? Sapphaline (talk) 09:36, 6 September 2025 (UTC)Reply

Why am I being pinged? User:SMcCandlish made the relevant edit; please ask SMcCandlish first. – Jonesey95 (talk) 14:15, 6 September 2025 (UTC)Reply

You replied in previous topics on this page so I thought you could sync the main page with sandbox. Anyway, @SMcCandlish: if this is not a keyboard input, why is <kbd> used here then? Sapphaline (talk) 17:57, 6 September 2025 (UTC)Reply

kbd is for input in general; it does not have to literally be key presses. It's the opposite of samp, which is for output. But are distinct from code, which is for source code. 2601:645:8300:4940:E5E8:AE4E:E41E:CD6A (talk) (SMcCandlish on a mobile device) 23:35, 8 September 2025 (UTC)Reply

Here's what the W3C has to say on these elements:

• The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.
• The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or just be a term used as a placeholder in prose.
• The samp element represents sample or quoted output from another program or computing system.
• The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

Clearly, samp is inappropriate; but also, kbd is not specific to keyboards. --Redrose64 🌹 (talk) 21:05, 10 September 2025 (UTC)Reply

I noticed that the two colors used for the border which are different colors in light-mode are not different ones in dark-mode.

https://doc.wikimedia.org/codex/latest/design-tokens/color.html lists them as;

• light: border-color-base #a2a9b1,border-color-interactive #72777d
• dark: border-color-base #72777d,border-color-interactive #72777d
• as var: var(--border-color-base),var(--border-color-interactive) on beige background, switch theme to see them change.

I think it'd be better to change one color to something else, i.e. another variable (which has a different color in both light- and dark-mode), or a fixed color with light-dark().

The problem is, that it looks too much like code highlighting;

• example code-tag
• example button
• example syntaxhighlight-tag

The difference, to me, is not distinct enough when they're not used next to each other. Since the border is all the same color it doesn't look like a button. Maybe the gradient could be more pronounced too?
–joshinils (talk ^{[🇩🇪Disk]}) 09:35, 22 February 2026 (UTC)Reply

I use the vector 2022 skin, but for people who use another skin, which may or may not have a dark-mode, the use of var(--…, #fff) means the fallback is always the same, no matter their color-preference.

Because some/most of the color variables can be unavailable in other skins the fallback is likely used.

I started to use light-dark for those cases too, i.e. var(--…, light-dark(#fff, #000)).
–joshinils (talk ^{[🇩🇪Disk]}) 09:39, 22 February 2026 (UTC)Reply