Jump to content
Toggle menu
  • 8 articles
  • 75 files
  • 7 users
  • 37.8K edits
Neodyland Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Module:Clickable button/doc: Difference between revisions

From Neodyland Wiki
add
No edit summary
Line 8: Line 8:
* Target a URL or a wikilink
* Target a URL or a wikilink
* Set the weight, size and state of the button (enabled or disabled).
* Set the weight, size and state of the button (enabled or disabled).
== Usage in wikitext ==
Input is case-'''in'''sensitive.
<syntaxhighlight lang=wikitext>{{#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`]] -->
}}</syntaxhighlight>
== Usage in other modules ==
Ensure you know what to expect from the function you are calling.
* <syntaxhighlight inline lang=lua>function main</syntaxhighlight> emits a TemplateStyles call and pre-processes the arguments with [[Module:Arguments]] first, e.g. ignore blank values <code style="color: var(--color-destructive);">'<nowiki/>'</code>.
* <syntaxhighlight inline lang=lua>function _main</syntaxhighlight> Parses the arguments to account for use of legacy parameters and decides whether <code class="mw-highlight mw-highlight-lang-lua"><span class=nv>aria-disabled</span></code> should be <code class="mw-highlight mw-highlight-lang-lua"><span class=kc>true</span></code>.
* The module's other functions, such as <code class="mw-highlight mw-highlight-lang-lua"><span class="nf">_renderLinkData</span></code> and <code class="mw-highlight mw-highlight-lang-lua"><span class="nf">renderLink</span></code>, are localised and would need to be made global first to be accessible to other modules.
<syntaxhighlight lang=lua>local clickableButton = require('Module:Clickable button/sandbox')</syntaxhighlight>
<includeonly>
<includeonly>
<!-- Categories go here. -->
<!-- Categories go here. -->
</includeonly>
</includeonly>

Revision as of 20:18, 22 September 2025

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.
local clickableButton = require('Module:Clickable button/sandbox')


Cookies help us deliver our services. By using our services, you agree to our use of cookies.