Button

Th' button shortcode displays a click'ble button wit' adjust'ble color, title an' ay'con.

Get Cap'n Hugo Get Cap'n Hugo

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
    "page" .
    "href" "https://gohugo.io/"
    "content" "Get Hugo"
)}}
{{ partial "shortcodes/button.html" (dict
  "page" .
  "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, code
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 %}}

Get Cap'n Hugo Get Cap'n Hugo

Ay'con

Empty

{{% button href="https://gohugo.io/" ay'con=" " %}}{{% /button %}}

Only

{{% button href="https://gohugo.io/" ay'con="download" %}}{{% /button %}}

T' th' Left

{{% button href="https://gohugo.io/" ay'con="download" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo

T' th' Right

{{% button href="https://gohugo.io/" ay'con="download" iconposit'n="right" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo

Override fer Severity

{{% button href="https://gohugo.io/" ay'con="dragon" style="warning" %}}Get Cap'n Hugo{{% /button %}}
Get Cap'n Hugo

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 %}}
Get Cap'n Hugo

Severity Style wit' All Defaults

{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
Smarrrt Arrrse

Button t' Internal Plank

{{% button href="/index.html" %}}Home{{% /button %}}
Home

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 hugo.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>