hugo shortcode button

September 9, 2023

introduction

Hugo Shortcodes are specialized markdown syntax that can be used to extend basic markdown, which can be considered as templates that can be called from Hugo markdown files to add HTML snippets to the final rendered HTML ( Hicks, 2020 ).
Shortcodes are add short snippets of Hugo code, Markdown, or HTML to a page ( Chef, 2023 ).
Shortcodes are simple snippets inside the content files calling built-in or custom templates ( Lahoti, 2020 ).
A Hugo shortcode is a chunk of Go Template code that can be used within a Hugo content file ( Ink, 2023 ).
Shortcodes can with or without Markdown ( Modi, 2023 ].

Partials and shortcodes are two features that allow to create reusable snippets of code that can be used in a Hugo site ( Learning Hugo, 2022 )
Shortcodes only work in markdown file, not template files, then to have the type of functionality that shortcodes provide but in template, use a partial template instead ( James, 2022 ).
There is dicussion started whether shortcodes and partials could be unified ( trombonehero, 2015 ).

Hugo standard shortcodes using JavaScript in showing GitHub gist, instagram, and tweet ( Hugo, 2019 ).
Other JavaScript library, e.g. Galleria, can also be used in Hugo markdown file using shortcode ( moreno, 2017 ).
It can show also visual element such as textarea for counting words reponsively ( Borchers, 2022 ).

The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology, and then be used in submitting form or opening dialog ( Mozilla, 2023 )
The type attribute in any button tags can have value of button, reset, or submit, where any has different function ( Kyrnin, 2020 ).
Instead of using <button> tag, a clickable button can also be displayed using <input> tag and set its type attribute value to button.

A button can be display using HTML as follow

<button type="button">Button caption</button>

To accept a parameter previous snippet will be modified to
```
<button type="button">{{ index .Params 0 }}</button>
```
and saved to layouts/shortcodes/button.html.
And it is used as
```
{{< button "A button to click" >}}
```