Template:Cdx-button

Template documentation

This template uses TemplateStyles:

Uses Lua:

Module:Cdx-button

Generates wikitext for clickable Codex button. Renders the button component from the Codex design system for Wikimedia. Includes helper functions for URL parsing and cleaning, adding tracking categories. Supports legacy parameters.

Options to include an icon or create an icon-only button.
Target a URL or a wikilink
Set the weight, size and state of the button (enabled or disabled).
Dummy button creation can be disabled.

For more information on appropriate usage of UI buttons, see the Codex documentation.

Inserts two CSS files. Module:Cdx-button/styles.css is required and makes minor tweaks for word-wrapping if the visible label is too long, centering or aligning button left or right, and minimum widths as is needed for icon-only buttons and labels containing two characters or less.
The second CSS file, Module:Cdx-button/icons.css, is prepended to the button's HTML only if an icon is used.
Supports legacy parameters from historical templates.

Usage

The arguments action, weight, size, action, and icon are case-insensitive.

The boolean arguments can interpret falsy and truthy strings; such that |disabled="y" evaluates to true, "n" == false, "yes" == true etc.

{{#invoke:Cdx-button|main
| 1        = <!-- Alias for wikilink -->
| 2        = <!-- Alias for label -->
| label    = <!-- Button visible text label -->
| link     = <!-- Target wikilink -->
| url      = <!-- Target external URL -->
<!-- Inputs action, weight, size, and icon are case-insensitive -->
| action   = <!-- progressive | destructive | default: default. -->
| weight   = <!-- primary | quiet | default: normal. -->
| size     = <!-- small | large | default: medium. Automatically chooses size based on line-height and device. -->
| icon     = <!-- Name of icon, stored in [[Module:Clickable button/icons.css]] e.g., search  -->
| disabled = <!-- `true` or any other true value like `1` or `yes`. -->
| aria-label = <!-- [[w:ARIA]] label for accessibility DOM tree. -->
| nocat      = <!-- `true` to not auto-categorize. -->
<!-- Others -->
| category = <!-- Category name e.g., Category:Name or Name or [[Category:Name]] -->
| class    = <!-- Custom CSS class without quotation marks -->
| style    = <!-- Custom CSS styling without quotation marks -->
<!-- Legacy arguments -->
| color    = <!-- blue | red -->
}}

Examples

Wikilinks

Main Page

Click here

Colors

Main Page – without defined |color= and |class=, the default is a white button

Main Page

URLs

Cdx-button

Example

sl

Icons

This template supports Codex icons that are in mw:Category:Wikimedia Codex icons, and defined in Module:Cdx-button/icons.css.

NOTE: This uses the mask-image CSS property, which will not work in older browsers.

TemplateData

Display a Codex-formatted 'fake' button that links to a wiki page or external URL.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Wiki link target	`link`	The destination of the button's link.	Page name	required
Label	`label`	The displayed button label.	String	required
URL	`url`	A full URL to use instead of the link parameter	URL	optional
Action	`action`	no description Suggested values `default` `progressive` `destructive.` Default default	String	optional
Weight	`weight`	no description Suggested values `normal` `primary` `quiet` Default normal	String	optional
Icon	`icon`	Which Codex icon to use Suggested values `add` `alert` `check` `clock` `close` `collapse` `edit` `expand` `help-notice` `message` `success`	String	optional