Template:Clickable button/doc

From Official Kodi Wiki
Jump to navigation Jump to search
This template, Clickable button , provides a uniform way to create clickable buttons on pages which behave like plain-text hyperlinks but offer much greater visual differentiation from the standard content.
For the purposes of Kodi Wiki and this documentation, the term 'clickable' shall be defined as BOTH:
  1. reacting to mouse-over hovering and keyboard selection as the active page element with visual cues, AND
  2. performing a valid HTML 5.0 page action such as behaving like an <a> tag, triggering the loading of another web page.


The template, with its full complement of parameters (but no values, making this well-suited to the copy/paste maneuver into the Wikitext of the page you wish to using it in) looks like this using the inline template style:

{{Clickable button|target=|text=|external=|iconPrimary=|iconSecondary=|class=|id=}}

Using the block format, it appears as:

{{Clickable button
 | target        =
 | text          =
 | external      =
 | iconPrimary   =
 | iconSecondary =
 | class         =
 | id            =

Template parameters

Parameter listing for Template:Clickable_button
Parameter Description Default Status
target =
1 =
The target page of the button's underlying hyperlink, if also on Kodi Wiki simply the page name or prepended with the page's namespace. If the target is located on a different web site, then the value must be a URI with an authority (fully-qualified domain name or FQDN) and also a resource path (if needed), optionally prepended with the protocol scheme. It is strenuously advised when defining external targets to use the named parameter target = rather than the unnamed/positional one, in the event such a link uses the equals sign '=' character which confuses/breaks the template parser. Undefined
(User must provide)
text =
2 =
Text label that appears on the button. If you choose not to set a value for this parameter, the iconPrimary parameter's status changes to Required. Undefined Suggested
external =
3 =
Accepts a boolean value for whether or not the target is an external link. If it is, set to 'yes', 'true', or '1'. For links to other Kodi Wiki pages if can be left undefined, or set as the logical inverse of the values just described. Undefined Optional
iconPrimary =
4 =
A JQuery.UI icon class for the primary icon (preceding the label/name text, depends on direction the language is written in), e.g. ui-icon-gear. Undefined Suggested
iconSecondary =
5 =
A JQuery.UI icon class for the secondary icon (following the label/name text or the iconPrimary), e.g. ui-icon-triangle-1-s. Undefined Optional
class = Add CSS classes like ui-button-green ui-button-large, shorthand for sets of predefined configurations that manipulate the appearance of a web element like a button. Typically includes things such as colors, fonts, and "thickness." Undefined Optional
id = Unique 'ID' attribute to be set for the button. Mostly used for JavaScript bindings and CSS styling in tandem with the preceding class parameter. Undefined Optional


Wiki markup Rendered output
{{Clickable button|FAQs|Frequently asked questions}} Frequently asked questions
{{Clickable button|target=https://kodi.wiki/index.php?title=Template:Clickable_button/doc&withJS=MediaWiki:VisualFileChange.js|text=This page with VisualFileChange|external=true}} This page with VisualFileChange
{{Clickable button|:w:Wikipedia:Manual of Style/Layout|Wikipedia's Manual of Style|class=ui-button-green ui-button-large}} Wikipedia's Manual of Style
{{Clickable button|:w:Wikipedia:Twinkle/Preferences|Twinkle Preferences|iconPrimary=ui-icon-wrench|class=ui-button-blue ui-button-large}} Twinkle Preferences
{{Clickable button|target=https://kodi.wiki/index.php?title=Special:Random/User_talk&action=edit&section=new&preloadtitle=I+love+your+work|text=Do something nice for a random editor|iconSecondary=ui-icon-heart|external=true|class=ui-button-red}} Do something nice for a random editor


This template relies on being able to load jquery.ui.button.js.

Test suite/Unit tests

Icon only Parameter 'text' is empty Parameter 'text' is empty Parameter 'text' is empty
Icon text Abc Abc Abc
Text only, links Abc Abc Abc
Colors Abc Abc Abc