The button shortcode generates button-styled links to direct users to other documentation pages or external resources.
Basic usage #
Use named parameters to define the destination, label, and button options:
{{< button href="/docs/latest/getting-started" name="Get started" icon="rocket" type="primary" >}}
{{< button href="https://github.com/zkreations/hudocs" name="GitHub" icon="github" >}}
Result #
Parameters #
| Parameter | Position | Type | Required | Description |
|---|---|---|---|---|
href | 0 | string | Yes | Destination URL, internal or external. |
name | 1 | string | Yes | Visible label. Also accepts title and text as aliases. |
icon | 2 | string | No | Name of a Meteor Icons icon. |
type | 3 | string | No | Visual variant, such as primary or secondary. |
rel | 4 | string | No | Custom value for the rel attribute. |
Positional syntax #
Parameters can be provided by position in the order listed in the table:
{{< button "/docs/latest/getting-started/installation/" "Get started" "rocket" "primary" "nofollow" >}}
Variants #
Standard button #
Uses the appearance defined by the theme when no type is specified:
{{< button href="#demo" name="Download guide" >}}
Primary button #
The primary value generates the btn-primary class:
{{< button href="#demo" name="Quick install" type="primary" >}}
Secondary button #
The secondary value generates the btn-secondary class:
{{< button href="#demo" name="Explore features" type="secondary" >}}
Validation #
The href attribute and the button label are required. If href is missing or none of name, title, or text is provided, Hugo stops the build and reports the missing parameter.
Link resolution #
The shortcode delegates URL resolution and the target and rel attributes to the resolve-link partial. For internal paths, resolve-link uses relLangURL to generate the URL corresponding to the active language.