Template:Clickable button-toolbar/doc

Usage

Animated button for use in toolbars. Hoover and click animation in border area / background. Button action only possible with links as button text.
This template extends the clickable area from the link to the whole button.

Example

A button with all options (display + colouring of icon and label):

 WikiProject

→ {{Clickable button-toolbar|scale=1|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=WikiProject_Uganda|ButtonLabel=WikiProject|txtcolor=green|enable=yes|HasLabel=yes}}

A button with all options but not enabled, upscaled to double of normal text size (referencing a non-existant link). Notice that the actual button is not really enabled, it will create the non existing page. If you want to really disable the button, don't add the ButtonLink parameter, which will link through the label to the user page of the original creator of this template, the icon or image will have no link at all.

 WikiProject

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=No Page Yet|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

Real disabled button (no link provided):

 WikiProject

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

A button with only an icon:

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=WikiProject_Uganda|ButtonLabel=WikiProject|txtcolor=green|enable=yes}}

A button with only a label:

WikiProject

→ {{Clickable button-toolbar|scale=2|IconImage=File:OSM_UG_Guidlelines_Workgroup_logo.svg|picsize=20|bckcolor=HoneyDew|ButtonLink=No Page Yet|ButtonLabel=WikiProject|txtcolor=green|HasLabel=yes}}

An empty button (template used without parameters, default display, has no use, except as place holder, since no link is provided):

→ {{Clickable button-toolbar}}

Templatedata

Creates a toolbar button.

Template parameters

Parameter		Description	Type	Status
Scale	scale	Up- or downscaling the button size (in regard to base = 1 which is default text size). Default 1	Number	optional
Image or Icon	IconImage	Give the file name for the image to be used on the button (with File: or Image: prefix,don't apply size or use any other markup).	String	optional
Picture Size	picsize	Size of the image or icon in pixels (px). Scaling will be applied, so this pixel size is the default size at scale=1. Default 20	Number	optional
Button background colour	bckcolor	Any HTML colour name or code. Make sure there is sufficient contrast with the label text colour. Some suggestions are below in the notes (1). Default Gainsboro	String	suggested
Link for the button	ButtonLink	The link the button will use. If the link does not exist the button face will be faded (opacity of 30%). Default User:Bert Araali	String	suggested
Label for the button	ButtonLabel	The label or text shown on the button. The default is in the users local language. No supported languages should be enetered directly as in this parameter or added to the template. Default Clickable button	String	optional
Label text colour	txtcolor	Any HTML colour name or code. If no text colour is given the default link colours of MediaWiki will be used (2). Default black	String	suggested
Button Enabled	enable	Use this (any value) to indicate if the button should be visualised as enabled. Disabled buttons are shown with a faded face (opacity of 30%). Default yes	String	suggested
Should Label be displayed ?	HasLabel	Use this (any value) to indicate if the button should be visualised with a label. Default yes	String	suggested

Notes

(1) Good design practices and W3C design guidelines ([[1]]) should be used for successful user interfaces. The following are just examples and intended as convenient references.

• Pale colours that work nice with standard MediaWiki link colours and dark text colours:

Gainsboro

LightGrey

Snow

HoneyDew

MintCream

Azure

AliceBlue

GhostWhite

WhiteSmoke

SeaShell

Beige

OldLace

FloralWhite

Ivory

AnitqueWhite

Linen

LavenderBlush

MistyRose

Lavender

LightYellow

LemonChiffon

LightGoldenRodYellow

PapayaWhip

LightCyan

LightBlue

PowderBlue

CornSilk

BlanchedAlmond

Bisque

• Dark colours that work nice with light text colours:

Black

DarkSlateGrey

SlateGrey

LightSlateGrey

Grey

DimGrey

Maroon

SaddleBrown

Olive

MidnightBlue

Navy

DarkBlue

SteelBlue

Teal

DarkCyan

DarkOliveGreen

DarkGreen

DarkKhaki

DarkRed

FireBrick

Indigo

DarkSlateBlue

• Some bright colours that work ok with white or black text colours:

Pink

LightPink

HotPink

DeepPink

PaleVioletRed

MediumVioletRed

Thistle

Plum

Orchid

Violet

Fuchsia

Magenta

MediumOrchid

DarkOrchid

BlueViolet

DarkMagenta

Purple

MediumPurple

MediumSlateBlue

SlateBlue

RebeccaPurple

LightSalmon

Salmon

DarkSalmon

LightCoral

IndianRed

Crimson

Red

Orange

Coral

DarkOrange

Tomato

OrangeRed

Gold

Yellow

Moccasin

PeachPuff

PaleGoldenRod

Khaki

GreenYellow

Chartreuse

LawnGreen

Lime

PaleGreen

LightGreen

MediumSpringGreen

SpringGreen

LimeGreen

MediumSeaGreen

SeaGreen

ForestGreen

Green

YellowGreen

OliveDrab

DarkSlateBlue

MediumAquaMarine

DarkSeaGreen

LightSeaGreen

Aqua

Cyan

PaleTurquoise

AquaMarine

Turquoise

MediumTurquoise

DarkTurquoise

CadetBlue

LightSteelBlue

LightSkyBlue

SkyBlue

CornFlowerBlue

DeepSkyBlue

DodgerBlue

RoyalBlue

Blue

MediumBlue

NavajoWhite

Wheat

BurlyWood

Tan

RosyBrown

SandyBrown

GodlenRod

DarkGoldenRod

Peru

Chocolate

Sienna

Brown

Silver

DarkGrey

(2) Default MediaWiki link colours [2]:

local	interwiki	external	local:visted	interwiki:visited	external:visited	local :active	non-local :active	missing	missing:visited	usage and source
local link - #0645ad	interwiki link - #3366bb	external link - #3366bb	:visited link - #0b0080	interwiki:visited - #663366	external:visited - #663366	:active link - #faa700	extiw:active link - #bb6633	missing link - #ba0000	missing:visited link - #a55858	Vector skin uses these link colors (test)
local link - #002bb8	interwiki link - #3366bb	external link - #3366bb	:visited link - #5a3696	interwiki:visited - #663366	external:visited - #663366	:active link - #faa700 (only for unvisited links)	extiw:active link - #bb6633	missing link - #cc2200	missing:visited link - #a55858	Monobook uses these link colors colors [?] (test)
local link - #3366cc	interwiki link - #3366cc	external link - #3366cc	:visited link - #5a3696	interwiki:visited - #663366	external:visited - #663366	:active link - #faa700	extiw:active link - #faa700	missing link - #dd3333	missing:visited link - #dd3333	MinervaNeue uses these link colors colors (test) (Accent50 color from Wikimedia Design Style Guide)
default link - #0000ee	--	--	:visited link - #551a8b	--	--	--		--	--	the default specified W3C link colors
default link - #003366	--	--	:visited link - #006ec6	--	--	--		--	--	the W3C site itself uses these link colors in some locations (and varies elsewhere)

See also

Similar MediaWiki template