Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
  •    Toggle theme
    •   Light
    •   Dark
    •   Auto
  •  
    •   Light
    •   Dark
    •   Auto
Docs
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License
    • Introduction
    • Commands
    • Hosting and deployment
    • Upgrading
    • Contribute
    • Troubleshooting
    • Content management
    • Content organization
    • Typography
    • Links and cross-references
    • Images and figures
    • Tables
    • Icons
    • Layout
    • Colors
    • Color modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Badge
    • Breadcrumb
    • Button
    • Button group
    • Card
    • Card group
    • Carousel
    • Collapse
    • Command prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and tabs
    • Release
    • Spinner
    • Spinner
    • Sub
    • Sup
    • Timeline
    • Toast
    • Tooltip
    • Overview
    • Styles
    • Scripts
    • Icons
    • Module development
    • Server headers
    • Server-side redirection
    • Credits
    • License

Button

Share via
Hinode
Link copied to clipboard

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

On this page
 

  • 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

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="dark" tooltip="Click on the inbox to view your unread messages" href="#!" badge="99+" >}}
    Inbox
{{< /button >}}

Arguments  

The shortcode supports the following arguments:

ArgumentRequiredDescription
hrefNoOptional address for the button or hyperlink. Automatically assigned when using collapse.
relrefNoOptional name of the page to link to. Replaces href with a relative link if set.
stateNoOptional state of the button, either “enabled” (default), “disabled”, “active”, or “inactive”.
sizeNoOptional size of the button, either “sm”, “md” (default), or “lg”.
colorNoOptional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”.
badgeNoOptional positioned badge to display on top of the button.
outlineNoOptional flag indicating the button should be outlined, either “false” (default) or “true”.
aria-labelNoOptional label for the badge.
tooltipNoOptional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons.
toastNoOptional id of the toast message to display when the button is clicked.
collapseNoOptional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
placementNoHow to position the tooltip: “top” (default), “bottom”, “left”, or “right”.
classNoOptional class attribute of the button element, e.g. “p-5”.
iconNoFont Awesome icon class attribute, required unless button title is set. An example value is “fas sort”.
orderNoOptional order of the icon, either “first” or “last” (default).
justifyNoOptional justification of the button title and icon, either “start”, “end”, “center” (default), “between”, “around”, or “evenly”.
cueNoOptional flag to indicate if an external link should show a visual cue, defaults to setting “main.externalLinks.cue” in the site’s parameters.
tabNoOptional flag to indicate if an external link should open in a new tab, defaults to setting “main.externalLinks.tab” in the site’s parameters.

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

Buttons with a tooltip  

Set the tooltip argument in conjunction with placement to show a tooltip when hovering over the button.

Inbox
 
Inbox
 
Inbox
 
Inbox
 
markdown
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#!" placement="top" >}}
    Inbox
{{< /button >}}

{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#!" placement="bottom" >}}
    Inbox
{{< /button >}}

{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#!" placement="left" >}}
    Inbox
{{< /button >}}

{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#!" placement="right" >}}
    Inbox
{{< /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="dark" 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 >}}
Last updated: October 22, 2023 • Improve layout when rendering multiple buttons (8091e71)
On this page
  • 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
Button
Button
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.21.8
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting started 
Developing modules 
Optimization 
Versioning 
Community
Issues  
Discussions  
Contribute 
Hinode
Code copied to clipboard