Button

Last Edit: 2026-06-09

Creates a button with a link.

Parameters can be passed directly or from a variable.

Parameter	Type	Default	Description
`url`	string		Button target link.
`title`	string		Button text. Exclusive with icon / brand.
`icon`	string		Button icon. Exclusive with title / brand.
`icon`	string		Button brand. Exclusive with title / icon.
`type`	string	`secondary`	Bootstrap color scheme for button.

Usage

Partial

{{ partial "button" (dict
  "url" "https://example.com/"
  "title" "Visit Example"
  "icon" "globe"
  "brand" "hugo"
  "type" "primary"
) }}

Shortcode

{{< button url="https://example.com/" title="Visit Example" icon="globe" brand="hugo" type="primary" >}}

Example

{{ partial "button" (dict
  "url" "./"
  "title" "This Page"
  "type" "primary"
) }}

{{< button url="./" title="This Page" type="primary" >}}
{{< button url="./" title="This Page" type="secondary" >}}
{{< button url="./" title="This Page" type="success" >}}

This Page This Page This Page

{{ $buttonProps := dict
  "url" "https://example.com/"
  "title" "Visit Example"
  "type" "primary"
}}

{{ partial "button" $buttonProps }}

{{< button url="https://example.com/" title="Visit Example" type="danger" >}}
{{< button url="https://example.com/" title="Visit Example" type="warning" >}}
{{< button url="https://example.com/" title="Visit Example" type="info" >}}

Visit Example Visit Example Visit Example

{{ partial "button" (dict
  "url" "/"
  "icon" "server-crash"
  "type" "primary"
) }}

{{< button url="/" icon="server-crash" type="primary" >}}
{{< button url="/" icon="server-crash" type="dark" >}}
{{< button url="/" icon="server-crash" type="light" >}}

{{ partial "button" (dict
  "url" "https://gohugo.io/"
  "brand" "hugo"
  "type" "primary"
) }}

{{< button url="https://gohugo.io/" brand="hugo" type="primary" >}}
{{< button url="https://getbootstrap.com/" brand="bootstrap" type="primary" >}}
{{< button url="https://codeberg.org/" brand="codeberg" type="primary" >}}

References

The Bootstrap Authors. “Buttons .” 2026. ↩︎