Button
The button
shortcode displays a clickable button with adjustable color, title and icon.
Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" icon="dragon" %}}Get 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 the button is clicked, it opens another browser tab for the given URL.
Parameter
Name | Default | Notes |
---|---|---|
href | <empty> | The destination URL for the button. If this parameter is not set, the button will do nothing but is still displayed as clickable. |
style | transparent |
The color scheme used to paint the button. - by severity: info , note , tip , warning - by brand color: primary , secondary - by color: blue , green , grey , orange , red - by special color: default , transparent |
icon | see notes | Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default. - for severity styles: a nice matching icon for the severity - for all other colors: <empty> If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces) |
iconposition | left |
Places the icon to the left or right of the title. |
target | see notes | The destination frame/window for the URL. This behaves similar to normal links. If the parameter is not given it defaults to: - _blank for any address starting with http:// or https:// - no specific value for all other links |
<content> | see notes | Arbitrary text for the button title. Depending on the style there may be a default title. Any given value will overwrite the default. - for severity styles: the matching title for the severity - for all other colors: <empty> If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces) |
Examples
Style
By Severity
{{% button href="https://gohugo.io/" style="info" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="note" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="tip" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="warning" %}}Get Hugo{{% /button %}}
Get Hugo Get Hugo Get Hugo Get Hugo
By Brand Colors
{{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}}
By Color
{{% button href="https://gohugo.io/" style="blue" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="green" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="grey" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="orange" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="red" %}}Get Hugo{{% /button %}}
Get Hugo Get Hugo Get Hugo Get Hugo Get Hugo
By Special Color
{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
{{% button href="https://gohugo.io/" style="transparent" %}}Get Hugo{{% /button %}}
Icon
To the Left
{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
To the Right
{{% button href="https://gohugo.io/" icon="download" iconposition="right" %}}Get Hugo{{% /button %}}
Override for Severity
{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
Target
{{% button href="https://gohugo.io/" target="_self" %}}Get Hugo in same window{{% /button %}}
{{% button href="https://gohugo.io/" %}}Get Hugo in new Window/Frame (default){{% /button %}}
Get Hugo in same Window/Frame Get Hugo in new Window/Frame (default)
Other
Severity Style with all Defaults
{{% button href="https://gohugo.io/" style="tip" %}}{{% /button %}}
Button to internal page
{{% button href="/" %}}Home{{% /button %}}