Button

{{<button [<type> [<state>]] >}}<text>{{</button>}}

A button is a component that can take an optional type, and an optional state.

types

Examples

Input in content/some/file.md: shortcode

  {{<button >}}default{{</button>}}
  {{<button primary>}}primary{{</button>}}
  {{<button outline>}}outline{{</button>}}
  {{<button danger>}}danger{{</button>}}
  {{<button invisible>}}invisible{{</button>}}

Hugo generated output: html

<button class="btn" type="button">
  default
</button>
  <button class="btn btn-primary" type="button">
  primary
</button>
  <button class="btn btn-outline" type="button">
  outline
</button>
  <button class="btn btn-danger" type="button">
  danger
</button>
  <button class="btn btn-invisible" type="button">
  invisible
</button>

states

Examples

Input in content/some/file.md: shortcode

  {{<button default disabled>}}disabled{{</button>}}
  {{<button default selected>}}selected{{</button>}}

Hugo generated output: html

<button class="btn btn-default" aria-disabled="true" type="button">
  disabled
</button>
  <button class="btn btn-default" aria-selected="true" type="button">
  selected
</button>

Alert Navigation