Button
Arrr! Pirrrates
Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.
Th' button shorrrtcode displays a click'ble button wit' adjust'ble color, title an' ay'con.
Usage
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shorrrtcode from yer own partials.
{{% button href="https://gohugo.io/" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" ay'con="dragon" %}}Get Cap'n Hugo{{% /button %}}
{{ partial "shortcodes/button.html" (dict
"context" .
"href" "https://gohugo.io/"
"content" "Get Hugo"
)}}
{{ partial "shortcodes/button.html" (dict
"context" .
"href" "https://gohugo.io/"
"style" "warning"
"icon" "dragon"
"content" "Get Hugo"
)}}
Once th' button be clicked, it opens another browser tab fer th' given URL.
Parameter
| Name | Default | Notes |
|---|---|---|
| href | <empty> | Th' destinat'n URL fer th' button. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble. |
| style | transparent |
Th' color scheme used t' paint th' button. - by severity: info, note, tip, warning- by brand color: primary, secondary- by color: blue, green, grey, orange, red- by special color: default, transparent |
| ay'con | see notes | Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default. - fer severity styles: a nice match'n ay'con fer th' severity - fer all other colors: <empty> If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces) |
| iconposit'n | left |
Places th' ay'con t' th' left or right o' th' title. |
| <content> | see notes | Arbitray text fer th' button title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default. - fer severity styles: th' match'n title fer th' severity - fer all other colors: <empty> If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces) |
Examples
Style
By Severity
{{% button href="https://gohugo.io/" style="info" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="note" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="tip" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo
By Brand Colors
{{% button href="https://gohugo.io/" style="primary" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="secondary" %}}Get Cap'n Hugo{{% /button %}}
By Color
{{% button href="https://gohugo.io/" style="blue" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="green" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="grey" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="orange" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="red" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo
By Special Color
{{% button href="https://gohugo.io/" style="default" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="transparent" %}}Get Cap'n Hugo{{% /button %}}
Ay'con
T' th' Left
{{% button href="https://gohugo.io/" ay'con="download" %}}Get Cap'n Hugo{{% /button %}}
T' th' Right
{{% button href="https://gohugo.io/" ay'con="download" ay'con-posit'n="right" %}}Get Cap'n Hugo{{% /button %}}
Override fer Severity
{{% button href="https://gohugo.io/" ay'con="dragon" style="warning" %}}Get Cap'n Hugo{{% /button %}}
Other
Severity Style wit' all Defaults
{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}