Button

Share via

Link copied to clipboard

Use the button shortcode to display a button with a hyperlink.

Overview

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.

Inbox 99+

markdown

{{< button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#!" badge="99+" >}}
    Inbox
{{< /button >}}

Arguments

The shortcode supports the following arguments:

Name	Type	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.

Name	Type	Default
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.

Examples

Stateful Buttons

Set the state argument to change the appearance and behavior of the button.

Enabled Disabled Active Inactive

markdown

{{< 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 >}}

Sized Buttons

Set the size argument to resize the button.

sm md lg

markdown

{{< button color="primary" href="#!" size="sm" >}}sm{{< /button >}}
{{< button color="primary" href="#!" size="md" >}}md{{< /button >}}
{{< button color="primary" href="#!" size="lg" >}}lg{{< /button >}}

Colored Buttons

Set the color argument to define the background color with a matching title color.

primary secondary success danger warning info light dark

markdown

{{< 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 >}}

Buttons With a Badge

Set the badge argument to add a badge to the top right of the button.

Inbox 99+

markdown

{{< button color="secondary" href="#!" badge="99+" >}}
    Inbox
{{< /button >}}

Buttons With an Icon

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.

LinkedIn LinkedIn

markdown

{{< 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.

LinkedIn LinkedIn LinkedIn LinkedIn LinkedIn LinkedIn

markdown

{{< 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 >}}

Outlined Buttons

Set the outline argument to true to adjust the style of the button.

primary secondary success danger warning info light dark

markdown

{{< 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.

top bottom left right

markdown

{{< 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 >}}

Buttons With a Collapsible Panel

Reveal or hide a collapsible panel by linking the panel’s id to the button with the argument collapse.

Collapse

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

markdown

{{< 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 >}}

• Update to Hinode v0.27.13 (b6f5054)

On this page:

Docs

Overview

Arguments

Examples

Stateful Buttons

Sized Buttons

Colored Buttons

Buttons With a Badge

Buttons With an Icon

Outlined Buttons

Buttons With a Tooltip

Buttons With a Collapsible Panel