Daharoni at 15:22, 27 April 2026

2026-04-27T15:22:41Z

← Older revision		Revision as of 08:22, 27 April 2026
Line 2:		Line 2:
	Renders a styled button-link. Supports both internal wiki page links and		Renders a styled button-link. Supports both internal wiki page links and
	external URLs, with primary and secondary visual variants.		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>),		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:		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:		Parameters:
Line 23:		Line 22:
	* <code>style</code> — <code>primary</code> or <code>secondary</code> (default: <code>primary</code>)		* <code>style</code> — <code>primary</code> or <code>secondary</code> (default: <code>primary</code>)
	</noinclude><includeonly>{{#if: {{{url\|}}}		</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>		}}</includeonly>

Daharoni: Created page with " Renders a styled button-link. Supports both internal wiki page links and external URLs, with primary and secondary visual variants. 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) — filled progre..."

2026-04-27T02:47:34Z

Created page with "<noinclude> Renders a styled button-link. Supports both internal wiki page links and external URLs, with primary and secondary visual variants. Use <code>page</code> for internal links (e.g. <code>Special:RequestAccount</code>), or <code>url</code> for external links (e.g. a Brevo subscribe form). Provide exactly one. If both are set, <code>url</code> wins. The <code>style</code> parameter chooses the visual treatment: * <code>primary</code> (default) — filled progre..."

New page

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

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

The <code>style</code> parameter chooses the visual treatment:
* <code>primary</code> (default) — filled progressive blue. Use for the main
call-to-action on a page (e.g. mailing list signup, primary form).
* <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:
* <code>page</code> — internal wikilink target (mutually exclusive with <code>url</code>)
* <code>url</code> — external URL (mutually exclusive with <code>page</code>)
* <code>label</code> — button text (required)
* <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}}}
| 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>]
| [[{{{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>

Template:UI/button - Revision history

Daharoni at 15:22, 27 April 2026