Open main menu

Button

Documentationviewedithistorypurge
This documentation is transcluded from Template:Clickable button 2/doc.

This template allows creating buttons that link to Commons-internal pages, or external pages without HTML and CSS knowledge. Project or user pages can be visually enhanced using this button, for example.

A bunch of predefined icons and, additionally any graphic hosted at Wikimedia Commons can be included to further enhance the User Experience (UX). On top of that, the template provides 3 different color schemas, each of them with different variants. The link text can be customized using wiki text and/or HTML/CSS.

Usage

{{Clickable button 2 |link= |text= }}

Template parameters

ParameterDescriptionDefaultStatus
link
1
Specifies the link target:
  • Either a wiki link (without double square brackets [[…]]), e.g. simply "link = Wikipedia" for a link to the Wikipedia gallery page, or
  • an external link (without the square brackets […]), e.g. simply "link = https://example.com" for a link to https://example.com.
Main Pagerequired
text
2
The text the button should display.
Can be customized using wiki text and/or HTML/CSS.
Also an empty text parameter text= is permitted if only a graphic or an icon should be displayed.
Buttonoptional
title
Titel
Text for the tooltip. By default the page title (wiki links) or the URL (external inks) is displayed.(link target)optional
iconName of a pre-defined icon, which should be shown on the button (e.g. "icon = refresh" for  )
→ Icon list
emptyoptional
image
Bild
A file on Commons and its dimensions. Inclusion using Wiki-Syntax (e.g. image = [[File:checkmark.svg|16px]] for Checkmark.svg).emptyoptional
color
Farbe
Specifies the color-scheme for the button (z.B. "color = blue").
Possible values are red/blue/green, red2/blue2/green2, and also red3/blue3/green3 or their German counterparts (see section in usage notes).
emptyoptional
paddingSpecifies the padding between content (text, graphic, icon) and border of the button. If one value is given it coubts for all sides, Two values are for top/bottom and left/right respectively. Four values count for top, right, bottom and left in this order (e.g. "padding = 5px 15px 10px 20px").0.25em 0.5emoptional
Template data
<templatedata>JSON</templatedata> ./. {{TemplateBox}}
TemplateData

TemplateData is a way to store information about template parameters (the description of those and of the whole template) for both humans and machines. It is used by VisualEditor and possibly other tools like Upload Wizard.


Existing template documentation
At Wikimedia Commons, it is recommended to use {{TemplateBox}} with either useTemplateData=1 or useTemplateData=only on the /doc subpage and transcluding it with {{Documentation}} into the template. <nowiki>-tags can be wrapped around the arguments, if required, to avoid templates being expanded.

Newly created template documentation and imports
Another option, especially for imported templates, or for users with JSON experience, is placing raw <templatedata>-tags into the Wikitext of the template, as described in various Wikipediae.

Discussion
There is an ongoing discussion about that matter. Feel invited to comment if you are experienced in either way, your time permits and if you like to share your opinion or to make a suggestion.


Wikipedia's help about TemplateDataCommons-specific information

This template allows creating buttons that link to Commons-internal pages, or external pages without HTML and CSS knowledge. Project or user pages can be visually enhanced using this button, for example. A bunch of predefined icons and, additionally any graphic hosted at Wikimedia Commons can be included to further enhance the User Experience (UX). On top of that, the template provides 3 different color schemas, each of them with different variants. The link text can be customized using wiki text and/or HTML/CSS.

Template parameters

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
color Farbe

Specifies the color-scheme for the button (z.B. <code>"color = blue"</code>).<br />Possible values are <code>red/blue/green</code>, <code>red2/blue2/green2</code>, and also <code>red3/blue3/green3</code> or their German counterparts (see regarding section in usage notes).

Stringoptional
icon

Name of a pre-defined icon, which should be shown on the button (e.g. <code>"icon = refresh"</code> for <span class="ui-icon ui-icon-refresh" style="display:inline-block;vertical-align:text-bottom;">&nbsp;</span>)<br />See icon list in documentation of this template.

Stringoptional
image Bild

A file on Commons and its dimensions. Inclusion using Wiki-Syntax (e.g. <code>image = [[File:checkmark.svg|16px]]</code>).

Stringoptional
link 1

Specifies the link target:

  • Either a wiki link (without double square brackets <code>[[&hellip;]]</code>), e.g. simply <code>"link = Wikipedia"</code> for a link to the Wikipedia gallery page, or
  • an external link (without the square brackets <code>[&hellip;]</code>), e.g. simply <code>"link = https://example.com"</code> for a link to https://example.com.

    Default
    Main Page
Pagerequired
padding

Specifies the padding between content (text, graphic, icon) and border of the button. If one value is given it coubts for all sides, Two values are for top/bottom and left/right respectively. Four values count for top, right, bottom and left in this order (e.g. <code>"padding = 5px 15px 10px 20px"</code>).

Default
0.25em 0.5em
Stringoptional
text 2

The text the button should display.<br />Can be customized using wiki text and/or HTML/CSS.<br />Also an empty text parameter <code>text=</code> is permitted if only a graphic or an icon should be displayed.

Default
Button
Stringoptional
title Titel

Text for the tooltip. By default the page title (wiki links) or the URL (external inks) is displayed.

Default
(link target)
Stringoptional

Additional information

The template is intended to be used in the following namespaces: all namespaces

The template is intended to be used by the following user groups: all users

Relies on:

Example

{{Clickable button 2|link=Main page|text=Link to Main Page}}

renders as:

See also

Localization

This template is not intended to be localized.

Usage notes

Basic usage

  • Wikilinks, Interwikilinks and external links:
    {{Clickable button 2|link=Wikipedia|text=Link to Wikipedia Gallery }}
    Link to Wikipedia Gallery
    {{Clickable button 2|link=:en:Wikipedia|text=Link to article ''Wikipedia'' in English Wikpedia }}
    Link to article Wikipedia in English Wikipedia
    {{Clickable button 2|link=https://example.com|text=Link to <kbd>https://example.com</kbd>}}
    Link to https://example.com
  • Required parameters "link" and "text" may be named parameters or unnamed params:
    {{Clickable button 2|Wikipedia|Wikipedia-Galerie}} or
    {{Clickable button 2|1=Wikipedia|2=Wikipedia-Galerie}} or
    {{Clickable button 2|link=Wikipedia|text=Wikipedia-Galerie}}
    Wikipedia-Galerie
  • Tooltips:
    {{Clickable button 2|link=:en:Wikipedia|text=''Wikipedia''|title=Link to article about Wikipedia in English Wikipedia&nbsp;:-) }}
    Wikipedia ← Please hover the button.

Advanced usage (URL parameters)

To be able to specify URL parameters, also Wikilinks must be converted to "external" URLs. These can be assembled by hand, but it's easier and more reliable with the parser function {{fullurl}}.

For instance yields

  • {{fullurl:Main Page}} the full URL of the main page: //commons.wikimedia.org/wiki/Main_Page
  • {{fullurl:{{FULLPAGENAME}}}} the full URL of current page: //commons.wikimedia.org/wiki/Template:Clickable_button_2

The first parameter of {{fullurl}} can be used to append URL parameters to the URL:

  • {{fullurl:Hauptseite|action=purge}}//commons.wikimedia.org/w/index.php?title=Hauptseite&action=purge
  • {{fullurl:{{FULLPAGENAME}}|action=purge}}//commons.wikimedia.org/w/index.php?title=Template:Clickable_button_2&action=purge

So it is easily possible to create a button that deletes the server cache of the current page:
{{Clickable button 2|link={{fullurl:{{FULLPAGENAME}}|action=purge}}|text=Clear cache|icon=refresh}}
 Clear cache ← This button clears the cache of the current page.

More helpful URL parameters, which can be easily provided with the help of a button, are explained in Manual:Parameters to index.php on Mediawiki. Note that URL parameters containing spaces or other protected characters like & or ? must be encoded with the parser function {{urlencode}}!

Icons and graphics

  • Icons
    {{Clickable button 2 | … |icon=mail-closed}} Button
    {{Clickable button 2 | … |text=|icon=mail-closed}} 
    For possible values of icon see overview below.
  • Images
    {{Clickable button 2 | … |image=[[File:checkmark.svg|18px]]}}Checkmark.svgButton
    {{Clickable button 2 | … |text=|image=[[File:checkmark.svg|30px]]}}Checkmark.svg

Colors and Padding

  • Color schemes:
    {{Clickable button 2 | … |color=(color name) }}
    red green blue
    red2 green2 blue2
    red3 green3 blue3
  • Padding:

    {{Clickable button 2 | … |padding=0px}}
    {{Clickable button 2 | … |padding=10px}}
    {{Clickable button 2 | … |padding=20px}}
    Button Button Button

    {{Clickable button 2 | … |padding=20px 0px}}
    {{Clickable button 2 | … |padding=0px 20px}}
    Button Button

    {{Clickable button 2 | … |padding=20px 0 0 0}}
    {{Clickable button 2 | … |padding=0 0 20px 0}}
    {{Clickable button 2 | … |padding=0 20px 0 0}}
    {{Clickable button 2 | … |padding=0 0 0 20px}}
    Button Button Button Button

Icons overview

Possible values for icon:

  •   carat-1-n
  •   carat-1-ne
  •   carat-1-e
  •   carat-1-se
  •   carat-1-s
  •   carat-1-sw
  •   carat-1-w
  •   carat-1-nw
  •   carat-2-n-s
  •   carat-2-e-w
  •   triangle-1-n
  •   triangle-1-ne
  •   triangle-1-e
  •   triangle-1-se
  •   triangle-1-s
  •   triangle-1-sw
  •   triangle-1-w
  •   triangle-1-nw
  •   triangle-2-n-s
  •   triangle-2-e-w
  •   arrow-1-n
  •   arrow-1-ne
  •   arrow-1-e
  •   arrow-1-se
  •   arrow-1-s
  •   arrow-1-sw
  •   arrow-1-w
  •   arrow-1-nw
  •   arrow-2-n-s
  •   arrow-2-ne-sw
  •   arrow-2-e-w
  •   arrow-2-se-nw
  •   arrowstop-1-n
  •   arrowstop-1-e
  •   arrowstop-1-s
  •   arrowstop-1-w
  •   arrowthick-1-n
  •   arrowthick-1-ne
  •   arrowthick-1-e
  •   arrowthick-1-se
  •   arrowthick-1-s
  •   arrowthick-1-sw
  •   arrowthick-1-w
  •   arrowthick-1-nw
  •   arrowthick-2-n-s
  •   arrowthick-2-ne-sw
  •   arrowthick-2-e-w
  •   arrowthick-2-se-nw
  •   arrowthickstop-1-n
  •   arrowthickstop-1-e
  •   arrowthickstop-1-s
  •   arrowthickstop-1-w
  •   arrowreturnthick-1-w
  •   arrowreturnthick-1-n
  •   arrowreturnthick-1-e
  •   arrowreturnthick-1-s
  •   arrowreturn-1-w
  •   arrowreturn-1-n
  •   arrowreturn-1-e
  •   arrowreturn-1-s
  •   arrowrefresh-1-w
  •   arrowrefresh-1-n
  •   arrowrefresh-1-e
  •   arrowrefresh-1-s
  •   arrow-4
  •   arrow-4-diag
  •   extlink
  •   newwin
  •   refresh
  •   shuffle
  •   transfer-e-w
  •   transferthick-e-w
  •   folder-collapsed
  •   folder-open
  •   document
  •   document-b
  •   note
  •   mail-closed
  •   mail-open
  •   suitcase
  •   comment
  •   person
  •   print
  •   trash
  •   locked
  •   unlocked
  •   bookmark
  •   tag
  •   home
  •   flag
  •   calculator
  •   cart
  •   pencil
  •   clock
  •   disk
  •   calendar
  •   zoomin
  •   zoomout
  •   search
  •   wrench
  •   gear
  •   heart
  •   star
  •   link
  •   cancel
  •   plus
  •   plusthick
  •   minus
  •   minusthick
  •   close
  •   closethick
  •   key
  •   lightbulb
  •   scissors
  •   clipboard
  •   copy
  •   contact
  •   image
  •   video
  •   script
  •   alert
  •   info
  •   notice
  •   help
  •   check
  •   bullet
  •   radio-off
  •   radio-on
  •   pin-w
  •   pin-s
  •   play
  •   pause
  •   seek-next
  •   seek-prev
  •   seek-end
  •   seek-first
  •   stop
  •   eject
  •   volume-off
  •   volume-on
  •   power
  •   signal-diag
  •   signal
  •   battery-0
  •   battery-1
  •   battery-2
  •   battery-3
  •   circle-plus
  •   circle-minus
  •   circle-close
  •   circle-triangle-e
  •   circle-triangle-s
  •   circle-triangle-w
  •   circle-triangle-n
  •   circle-arrow-e
  •   circle-arrow-s
  •   circle-arrow-w
  •   circle-arrow-n
  •   circle-zoomin
  •   circle-zoomout
  •   circle-check
  •   circlesmall-plus
  •   circlesmall-minus
  •   circlesmall-close
  •   squaresmall-plus
  •   squaresmall-minus
  •   squaresmall-close
  •   grip-dotted-vertical
  •   grip-dotted-horizontal
  •   grip-solid-vertical
  •   grip-solid-horizontal
  •   gripsmall-diagonal-se
  •   grip-diagonal-se