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.

Template:Template rating

Uses Lua:

Template:Uses templatestyles

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/icons.css
Target a URL or a wikilink
Create an icon-only or a dummy button (no target link/URL)
Set the weight, size and state of the button (enabled or disabled).

It has two CSS files. Template:Clickable 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 two characters or less.
The second CSS file, Template:Clickable button/icons.css, is prepended to the button's HTML only if an icon is used.

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. -->
| disabled = <!-- `true` or any other true value like `1` or `yes`. -->
| icon     = <!-- Per stored icon-list in [[Template:Clickable button/icons.css]] e.g., search  -->
| aria-label = <!-- [[w:ARIA]] label for accessibility DOM tree. -->
| nocat      = <!-- `true` to not auto-categorize. -->
<!-- Others -->
| category = <!-- Category name e.g., [[Category:Name]] or Category:Name or just Name -->
| class    = <!-- Custom CSS class -->
| style    = <!-- Custom CSS styling -->
}}

Usage in other modules

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

function p.main(frame) emits a TemplateStyles call and pre-processes the arguments in a frame with Module:Arguments first, e.g. ignore blank values ''.
function p._main(arguments) 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 makeLinkData() and renderLink(), are local to the module 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.main( {
    link = 'South Africa',
    label = 'Go to South Africa',
    action = 'progressive'
    weight = 'quiet',
    size = 'medium',
    icon = 'link',
    disabled = true
} )
return buttonWikitext

and the value of buttonWikitext would be:

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

Function _main would output:

<span class="cdx-button cdx-button--fake-button cdx-button--action-progressive cdx-button--weight-quiet cdx-button--size-medium  cdx-button--fake-button--disabled" role="button" aria-disabled="true"><span class="cdx-button__icon cdx-demo-css-icon--link" aria-hidden="true"></span>Go to South Africa</span> [[Category:Pages using disabled dummy button]]

And as a result, unless a templatestyle is added to give the class an icon, the icon would not render.

Implementation

Length of visible label