Button
Use the button shortcode to display a button with a hyperlink.
Use the button shortcode to display a button with a hyperlink. The inner content is used as button title. The button supports an optional badge and tooltip. As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" badge="99+" >}}
Inbox
{{< /button >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| aria-label | string | Alias for label. | ||
| badge | string | Positioned badge to display on top of the button. | ||
| class | string | Class attribute of the button element, e.g. p-5. | ||
| clipboard | string, template.URL | Text to be copied to the clipboard when the button is clicked. | ||
| collapse | string | Panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. | ||
| color | select | primary | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black]. | |
| cue | bool | Flag to indicate if an external link should show a visual cue, defaults to the setting main.externalLinks.cue in the site’s parameters. | ||
| href | string, template.URL | Address for the button or hyperlink. Automatically assigned when using collapse. | ||
| icon | string | Font Awesome icon class attribute, required unless title is set. An example value is fas sort. | ||
| id | string | Identifier of the button, to be used in the DOM. | ||
| justify | select | center | Justification of the button title and icon. Supported values: [start, end, center, between, around, evenly]. | |
| label | string | Assistive label for the button or badge. The label is applied to the badge instead of the button when a badge has been defined. The default value of the button’s assistive label is its title. | ||
| order | select | last | Order of the icon Supported values: [first, last]. | |
| outline | bool | false | Flag indicating the button should be outlined. | |
| placement | select | top | Position of the tooltip. Supported values: [top, bottom, left, right]. | |
| relref | string | Name of the page to link to. Replaces href with a relative link if set. | ||
| size | select | md | Size of the button. Supported values: [sm, md, lg]. | |
| spacing | bool | true | Flag to add spacing to the inline button. | |
| state | select | enabled | State of the button. Supported values: [enabled, disabled, active, inactive]. | |
| tab | bool | Flag to indicate if an external link should open in a new tab, defaults to setting main.externalLinks.tab in the site’s parameters. | ||
| title | string, template.HTML | Title of the button, required unless icon is set. | ||
| toast | string | Identifier (ID) of the toast to display when the button is clicked. | ||
| tooltip | string | Text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. | ||
| type | select | button | Type of the element. Supported values: [link, button]. | |
| wrapper | string | Element class of the button wrapper. |
Set the state argument to change the appearance and behavior of the button.
{{< button color="primary" href="#!" state="enabled" >}}Enabled{{< /button >}}
{{< button color="primary" href="#!" state="disabled" >}}Disabled{{< /button >}}
{{< button color="primary" href="#!" state="active" >}}Active{{< /button >}}
{{< button color="primary" href="#!" state="inactive" >}}Inactive{{< /button >}}Set the size argument to resize the button.
{{< button color="primary" href="#!" size="sm" >}}sm{{< /button >}}
{{< button color="primary" href="#!" size="md" >}}md{{< /button >}}
{{< button color="primary" href="#!" size="lg" >}}lg{{< /button >}}Set the color argument to define the background color with a matching title color.
{{< button color="primary" href="#!" size="sm" >}}primary{{< /button >}}
{{< button color="secondary" href="#!" size="sm" >}}secondary{{< /button >}}
{{< button color="success" href="#!" size="sm" >}}success{{< /button >}}
{{< button color="danger" href="#!" size="sm" >}}danger{{< /button >}}
{{< button color="warning" href="#!" size="sm" >}}warning{{< /button >}}
{{< button color="info" href="#!" size="sm" >}}info{{< /button >}}
{{< button color="light" href="#!" size="sm" >}}light{{< /button >}}
{{< button color="dark" href="#!" size="sm" >}}dark{{< /button >}}Set the badge argument to add a badge to the top right of the button.
Set the icon argument to add an icon to the button. Use order to determine the position of the icon relative to the title. Omit the title to show an icon only.
{{< button icon="fab linkedin" cue=false order="first" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false order="last" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" href="https://linkedin.com" />}}Use justify to adjust the layout of the icon and button title.
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="start" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="end" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="center" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="between" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="around" href="https://linkedin.com" >}}LinkedIn{{< /button >}}
{{< button icon="fab linkedin" cue=false class="col-12 col-sm-8 col-md-4 offset-sm-2 offset-md-4" justify="evenly" href="https://linkedin.com" >}}LinkedIn{{< /button >}}Set the outline argument to true to adjust the style of the button.
{{< button color="primary" href="#!" size="sm" outline="true" >}}primary{{< /button >}}
{{< button color="secondary" href="#!" size="sm" outline="true" >}}secondary{{< /button >}}
{{< button color="success" href="#!" size="sm" outline="true" >}}success{{< /button >}}
{{< button color="danger" href="#!" size="sm" outline="true" >}}danger{{< /button >}}
{{< button color="warning" href="#!" size="sm" outline="true" >}}warning{{< /button >}}
{{< button color="info" href="#!" size="sm" outline="true" >}}info{{< /button >}}
{{< button color="light" href="#!" size="sm" outline="true" >}}light{{< /button >}}
{{< button color="dark" href="#!" size="sm" outline="true" >}}dark{{< /button >}}Set the tooltip argument in conjunction with placement to show a tooltip when hovering over the button.
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" placement="top" >}}
top
{{< /button >}}
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" placement="bottom" >}}
bottom
{{< /button >}}
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" placement="left" >}}
left
{{< /button >}}
{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" placement="right" >}}
right
{{< /button >}}Reveal or hide a collapsible panel by linking the panel’s id to the button with the argument collapse.
{{< button color="secondary" collapse="collapse-1" >}}
Collapse
{{< /button >}}
{{< collapse id="collapse-1" class="p-3 border rounded" >}}
Some placeholder content for the collapse component. This panel is *hidden by default* but
revealed when the user activates the relevant trigger.
{{< /collapse >}}