Module:Clickable button/doc

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.

---

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.

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 p.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.