Module:Clickable button/doc

This is the documentation page for Module:Clickable button

This subpage contains documentation, categories, or other content that is not part of the module.
To view the module page itself, see Module:Clickable button.

العربية ∙ asturianu ∙ Boarisch ∙ беларуская (тарашкевіца) ∙ български ∙ বাংলা ∙ català ∙ čeština ∙ dansk ∙ Deutsch ∙ Zazaki ∙ Ελληνικά ∙ English ∙ Esperanto ∙ español ∙ eesti ∙ euskara ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ हिन्दी ∙ hrvatski ∙ magyar ∙ Bahasa Indonesia ∙ italiano ∙ 日本語 ∙ ქართული ∙ 한국어 ∙ кыргызча ∙ Lëtzebuergesch ∙ македонски ∙ മലയാളം ∙ ဘာသာမန် ∙ Bahasa Melayu ∙ Mirandés ∙ မြန်မာဘာသာ ∙ norsk bokmål ∙ Plattdüütsch ∙ Nederlands ∙ norsk ∙ polski ∙ português ∙ português do Brasil ∙ русский ∙ sicilianu ∙ Scots ∙ slovenščina ∙ српски / srpski ∙ svenska ∙ ไทย ∙ Türkçe ∙ українська ∙ اردو ∙ oʻzbekcha / ўзбекча ∙ Tiếng Việt ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ 中文（臺灣） ∙ +/−

This page is, or part of its contents are, copied from w:Module:Clickable button/doc. See the source's page history for attribution.
This content is licensed by the Wikimedia Foundation under the Creative Commons Attribution-Share Alike 4.0 International license.

This module is rated as ready for general use. It has reached a mature form and is thought to be bug-free and ready for use wherever appropriate. To reduce server load and bad output, it should be improved by sandbox testing rather than repeated trial-and-error editing.

Shortcuts: Module:Clickable button (talk · edit · hist · links · doc · subpages · tests / results · sandbox · all modules)

Generates wikitext to render the a clickable button. Renders the button component from the Codex design system for Wikimedia. Includes helper functions for URL parsing and cleaning, adding tracking categories. Intended for use in templates and other modules. Implements Template:Clickable button and others. Supports legacy parameters.

Options to include an icon from the list in Template:Clickable button/styles.css
Create an icon-only or a dummy button (no target link/URL)
Target a URL or a wikilink
Set the weight, size and state of the button (enabled or disabled).

Usage in wikitext

Input is case-insensitive.

{{#invoke:Clickable button|main
| 1       = <!-- Alias for wikilink -->
| 2       = <!-- Alias for label -->
| label   = <!-- Button label -->
| link    = <!-- Wikilink -->
| url     = <!-- URL -->
<!-- Inputs 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    = <!-- Per stored icon-list in [[Template:Clickable button/styles.css]] e.g., search  -->
| aria-label = <!-- [[w:ARIA]] label for accessibility DOM tree. -->
| nocat      = <!-- `true` to not auto-categorize. -->
| category   = <!-- Category name e.g., [[Category:`Name`]] -->
}}

Usage in other modules

Ensure you know what to expect from the function you are calling.

function main emits a TemplateStyles call and pre-processes the arguments with Module:Arguments first, e.g. ignore blank values ''.
function _main Parses the arguments to account for use of legacy parameters and decides whether aria-disabled should be true.
The module's other functions, such as _renderLinkData and renderLink, are localised and would need to be made global first to be accessible to other modules.

To call main for example, use:

local createButton = require( 'Module:Clickable button/sandbox' )
buttonWikitext = createButton( {
    link = 'South Africa',
    label = 'Go to South Africa',
    action = 'progressive'
    weight = 'quiet',
    size = 'medium',
    icon = 'link',
} )

generates:

<templatestyles src="Template:Clickable button/styles.css" /><templatestyles src="Template:Clickable button/icons.css" />[[South Africa|<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-quiet cdx-button--size-medium  cdx-button--fake-button--enabled" role="button"><span class="cdx-button__icon cdx-demo-css-icon--link" aria-hidden="true"></span>Go to South Africa</span>]]