fr1nge.xyz/themes/after-dark/docs/content/shortcode/button-group.md

+++ title = "Button Group" description = "Layout buttons to fit buttons snugly together." categories = ["interaction"] tags = ["controls"] html_attributes = ["class"] custom_attributes = ["formactions"] snippets_used = ["button group", "button", "form"] notes = [ "update 'snippets' if this content is updated" ] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

With three Buttons, one ghosted and one of type info:

{{</* hackcss-buttongroup >}}
  {{< hackcss-button text="Left" />}}
  {{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
  {{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup */>}}

{{< hackcss-buttongroup >}} {{< hackcss-button text="Left" />}} {{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}} {{< hackcss-button text="Right" isghost="true" />}} {{< /hackcss-buttongroup >}}

With three Buttons styled using class attribute:

<style>.btn-text button::after { content: attr(class) }</style>
{{</* hackcss-buttongroup class="btn-text" >}}
  {{< hackcss-button />}}
  {{< hackcss-button type="info" />}}
{{< /hackcss-buttongroup */>}}

{{< hackcss-buttongroup class="btn-text" >}} {{< hackcss-button />}} {{< hackcss-button type="info" />}} {{< /hackcss-buttongroup >}}

With two Buttons inside a Form using formactions attribute:

{{</* hackcss-form action="/search" >}}
  {{< hackcss-textinput type="hidden" name="s" value="button" >}}
  {{< hackcss-buttongroup formactions="true" >}}
    {{< hackcss-button text="Print" action="javascript:window.print()" />}}
    {{< hackcss-button text="Search" type="primary" isghost="true" />}}
  {{< /hackcss-buttongroup >}}
{{< /hackcss-form */>}}

{{< hackcss-form action="/search" >}} {{< hackcss-textinput type="hidden" name="s" value="group" >}} {{< hackcss-buttongroup formactions="true" >}} {{< hackcss-button text="Print" action="javascript:window.print()" />}} {{< hackcss-button text="Search" type="primary" isghost="true" />}} {{< /hackcss-buttongroup >}} {{< /hackcss-form >}}