Template:Button/doc — dev

This article is a stub.

You can help the Fandom Developers Wiki by expanding it.

Description: This creates a button consistent with Fandom Design System.

Dependencies

Styling in MediaWiki:Wds-button.css (cf. w:Help:Including additional CSS and JS)

CSS (syntax)

.wds-button.<classname> {
    color: #fff;
    background: none;
}
.wds-button.<classname>:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: <color 1a>;
}
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: <color 1b>;
    border-color: <color 1b>;
}
.wds-button.<classname>:not(.wds-is-text) {
    border-color: <color 1a>;
}
.wds-button.<classname>.wds-is-secondary{
    border-color: <color 2a>;
    color: <color 2a>;
}
.wds-button.<classname>.wds-is-secondary:focus:not(:disabled),
.wds-button.<classname>.wds-is-secondary:hover:not(:disabled),
.wds-button.<classname>.wds-is-secondary:active,
.wds-button.<classname>.wds-is-secondary.wds-is-active {
    border-color: <color 2b>;
    color: <color 2b>;
}
.wds-button.<classname>.wds-is-text{
    color: <color 2a>;
}
.wds-button.<classname>.wds-is-text:focus:not(:disabled),
.wds-button.<classname>.wds-is-text:hover:not(:disabled),
.wds-button.<classname>.wds-is-text:active,
.wds-button.<classname>.wds-is-text.wds-is-active{
    color: <color 2b>;
}

Syntax: {{button|<link or URL>|<text>}}

There are several variables for customization.

text= <text shown in button>
link= <internal link redirected by the button>
elink= <external link redirected by the button, must start with http://>
tooltip= <hover text>
position= <position, left/center/right>
class= <class(es) of button>
style= <style of button>

Example

Normal example

{{button|Main Page}}

gives Main Page

{{button|https://www.fandom.com/|Fandom}}

gives Fandom

{{button|text=Disabled}}

gives Disabled

{{button|Main Page|position=right}}

gives Main Page

{{button|Main Page|position=center}}

gives

Main Page

Secondary button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-secondary}}

gives Main Page

Secondary button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-secondary wds-is-light}}

gives Main Page

Text button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-text}}

gives Main Page

Text button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-text wds-is-light}}

gives Main Page

Other examples

Fandom default buttons

{{button|Main Page|link=Main Page|class=wds-is-fandom-color}}

gives Main Page

{{button|Disabled|link=Main Page|class=wds-is-fandom-color}}

gives Main Page

Secondary button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-secondary}}

gives Main Page

Secondary button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-secondary wds-is-light}}

gives Main Page

Text button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-text}}

gives Main Page

Text button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-text wds-is-light}}

gives Main Page

Oasis buttons

{{button|Main Page|link=Main Page|class=wds-is-oasis-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-oasis-color}}

gives Disabled

Jade buttons

{{button|Main Page|link=Main Page|class=wds-is-jade-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-jade-color}}

gives Disabled

Babygirl buttons

{{button|Main Page|link=Main Page|class=wds-is-babygirl-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-babygirl-color}}

gives Disabled

Carbon buttons

{{button|Main Page|link=Main Page|class=wds-is-carbon-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-carbon-color}}

gives Disabled

Secondary button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-secondary}}

gives Main Page

Secondary button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-secondary wds-is-light}}

gives Main Page

Text button (on light backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-text}}

gives Main Page

Text button (on dark backgrounds)

{{button|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-text wds-is-light}}

gives Main Page

Rockgarden buttons

{{button|Main Page|link=Main Page|class=wds-is-rockgarden-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-rockgarden-color}}

gives Disabled

Opulence buttons

{{button|Main Page|link=Main Page|class=wds-is-opulence-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-opulence-color}}

gives Disabled

Bluesteel buttons

{{button|Main Page|link=Main Page|class=wds-is-bluesteel-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-bluesteel-color}}

gives Disabled

Creamsicle buttons

{{button|Main Page|link=Main Page|class=wds-is-creamsicle-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-creamsicle-color}}

gives Disabled

Plated buttons

{{button|Main Page|link=Main Page|class=wds-is-plated-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-plated-color}}

gives Disabled

Police buttons

{{button|Main Page|link=Main Page|class=wds-is-police-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-police-color}}

gives Disabled

Aliencrate buttons

{{button|Main Page|link=Main Page|class=wds-is-aliencrate-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-aliencrate-color}}

gives Disabled

Theming buttons

{{button|Main Page|link=Main Page|class=primary-only}}

gives Main Page

{{button|Main Page|link=Main Page|class=primary-only wds-is-secondary}}

gives Main Page

{{button|Main Page|link=Main Page|class=primary-only wds-is-text}}

gives Main Page

{{button|text=Disabled|class=primary-only}}

gives Disabled

{{button|Main Page|link=Main Page|class=different-secondary}}

gives Main Page

{{button|Main Page|link=Main Page|class=different-secondary wds-is-secondary}}

gives Main Page

{{button|Main Page|link=Main Page|class=different-secondary wds-is-text}}

gives Main Page

{{button|text=Disabled|class=different-secondary}}

gives Disabled

Customized

{{button|https://discord.gg/fandom|Fandom Discord Server|style=background:#7289da; border:4px solid #7289da; color:#FFF; display:inline-block; font-weight:bold; font-family:rubik;}}

gives Fandom Discord Server

See also