Template:Clickable button 2

Button

Template documentation[ view · edit · history · purge ]

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

Parameter	Description		Default	Status
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 Page	required
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.		Button	optional
title Titel	Text for the tooltip. By default the page title (wiki links) or the URL (external inks) is displayed.		(link target)	optional
icon	Name of a pre-defined icon, which should be shown on the button (e.g. "icon = refresh" for  ) → Icon list		empty	optional
image Bild	A file on Commons and its dimensions. Inclusion using Wiki-Syntax (e.g. image = [[File:checkmark.svg|16px]] for ).		empty	optional
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).		empty	optional
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. "padding = 5px 15px 10px 20px").		0.25em 0.5em	optional

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:

• Module:FileUtil
• Module:URLutil

Example

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

renders as:

Link to Main Page

See also

• {{Button}} - just using CSS.
• {{Clickable button}} - previous attempt.
• {{Clickable button 3}} - mw.ui buttons, most recent version
• {{Key press}}

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 :-) }}
  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]]}} → Button
  {{Clickable button 2 | … |text=|image=[[File:checkmark.svg|30px]]}} →

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