# Button :: Cap'n Hugo Relearrrn Theme
Documentation for Hugo Relearn Theme
Author: Sören Weber

# Button

Arrr! Pirrrates

Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.

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
        "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 %}}

Get Cap'n Hugo Get Cap'n Hugo

### Ay'con

#### 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 an' Font Awesome Brand Ay'con

    {{% button href="https://gohugo.io/" color="fuchsia" ay'con="fab fa-hackerrank" %}}Cap'n Hugo{{% /button %}}

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 `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>