Template:UI/button: Difference between revisions

Latest revision as of 08:22, 27 April 2026

Renders a styled button-link. Supports both internal wiki page links and external URLs, with primary and secondary visual variants.

All styling lives in MediaWiki:Common.css under the .wiki-button class — change there to update every button across the wiki. This template is just structure: it picks the right link syntax (internal vs. external) and emits the right class names.

Use page for internal links (e.g. Special:RequestAccount), or url for external links (e.g. a Brevo subscribe form). Provide exactly one. If both are set, url wins.

The style parameter chooses the visual treatment:

primary (default) — main call-to-action on a page
secondary — supporting CTA that shouldn't compete with the primary

Parameters:

page — internal wikilink target (mutually exclusive with url)
url — external URL (mutually exclusive with page)
label — button text (required)
style — primary or secondary (default: primary)

@@ Line 2: / Line 2: @@
 Renders a styled button-link. Supports both internal wiki page links and
 external URLs, with primary and secondary visual variants.
+All styling lives in [[MediaWiki:Common.css]] under the <code>.wiki-button</code>
+class — change there to update every button across the wiki. This template is
+just structure: it picks the right link syntax (internal vs. external) and
+emits the right class names.
 Use <code>page</code> for internal links (e.g. <code>Special:RequestAccount</code>),
@@ Line 8: / Line 13: @@
 The <code>style</code> parameter chooses the visual treatment:
-* <code>primary</code> (default) — filled progressive blue. Use for the main
+* <code>primary</code> (default) — main call-to-action on a page
-  call-to-action on a page (e.g. mailing list signup, primary form).
+* <code>secondary</code> — supporting CTA that shouldn't compete with the primary
-* <code>secondary</code> — outlined neutral. Use for supporting CTAs that
-  shouldn't compete with the primary action (e.g. "Request an account" next
-  to a "Subscribe" button).
-Styling uses Citizen-skin CSS custom properties with hex fallbacks so the
-button adapts to light/dark mode and degrades gracefully on other skins.
 Parameters:
@@ Line 23: / Line 22: @@
 * <code>style</code> — <code>primary</code> or <code>secondary</code> (default: <code>primary</code>)
 </noinclude><includeonly>{{#if: {{{url|}}}
-  | [{{{url}}} <span style="display:inline-block;padding:10px 22px;{{#switch: {{{style|primary}}}
+  | [{{{url}}} <span class="{{#switch: {{{style|primary}}} | secondary = wiki-button wiki-button-secondary | #default = wiki-button }}">{{{label|}}}</span>]
-   | secondary = background:var(--background-color-neutral-subtle, #f0f1f2);color:var(--color-base, #202122);border:1px solid var(--border-color-base, #d1d9e0);
+  | [[{{{page|}}}|<span class="{{#switch: {{{style|primary}}} | secondary = wiki-button wiki-button-secondary | #default = wiki-button }}">{{{label|}}}</span>]]
-   | #default = background:var(--color-progressive, #36c);color:var(--color-base--inverted, #fff);
- }}border-radius:6px;font-weight:600;text-decoration:none;">{{{label|}}}</span>]
-  | [[{{{page|}}}|<span style="display:inline-block;padding:10px 22px;{{#switch: {{{style|primary}}}
-   | secondary = background:var(--background-color-neutral-subtle, #f0f1f2);color:var(--color-base, #202122);border:1px solid var(--border-color-base, #d1d9e0);
-   | #default = background:var(--color-progressive, #36c);color:var(--color-base--inverted, #fff);
- }}border-radius:6px;font-weight:600;text-decoration:none;">{{{label|}}}</span>]]
 }}</includeonly>