Button
Th' button shortcode 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 shortcode 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> | Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble. - if start'n wit' javascript: all follow'n text will be executed 'n yer browser- every other str'n will be interpreted as URL |
| style | transparent | Th' style scheme used fer th' button. - by severity: info, note, tip, warning- by brand color: primary, secondary, accent- by color: blue, green, grey, orange, red- by special color: default, transparent |
| color | see notes | Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default. - fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color |
| 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 styles: <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. |
| target | see notes | Th' destinat'n frame/window if href be an URL. Otherwise th' parameter be not used. This behaves similar t' normal links. If th' parameter be not given it defaults t': - th' sett'n o' externalLinkTarget or _blank if not set, fer any address start'n wit' http:// or https://- no specific value fer all other links |
| type | see notes | Th' button type if href be JavaScript. Otherwise th' parameter be not used. If th' parameter be not given it defaults t' button |
| <content> | see notes | Arbitrary 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 styles: <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 %}}
{{% button href="https://gohugo.io/" style="accent" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo Get Cap'n Hugo Get Cap'n Hugo
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" iconposit'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 %}}
Target
{{% button href="https://gohugo.io/" target="_self" %}}Get Cap'n Hugo 'n same window{{% /button %}}
{{% button href="https://gohugo.io/" %}}Get Cap'n Hugo 'n new Window/Frame (default){{% /button %}}
Get Cap'n Hugo 'n same Window/Frame Get Cap'n Hugo 'n new Window/Frame (default)
Other
Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown Title
{{% button href="https://gohugo.io/" color="fuchsia" ay'con="fab fa-hackerrank" %}}Get **Cap'n Hugo**{{% /button %}}
Severity Style wit' All Defaults
{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
Button t' Internal Plank
{{% button href="/index.html" %}}Home{{% /button %}}
Button wit' JavaScript Act'n
If yer JavaScript act'n does not change th' focus afterwards, make sure t' call this.blur() 'n th' end t' unselect th' button.
{{% button style="primary" ay'con="bullhorn" href="javascript:alert('Hello world!');this.blur();" %}}Shout it out{{% /button %}}
Button within a form Element
T' use native HTML elements 'n yer Marrrkdown, add this 'n yer config.toml
[marrrkup.goldmark.renderer]
unsafe = true
<form act'n="../../search.html" method="get">
<input name="search-by-detail" class="search-by" type="search">
{{% button type="submit" style="secondary" icon="search" %}}Search{{% /button %}}
</form>