{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "atoms/button/button-macros.njk" as button %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: [],
  scriptVendors: [],
  scope: "s-bp-button"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

The primary button is the default button and should only be used for the main
actions. Only one primary button should be used next to each other when used
in a call-to-action context.

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}
  <div style="display: flex;">
    {{button.default("", {
      text: "primary button"
    })}}

    {{button.default("", {
      text: "icon before",
      icon: {before: "icon-search"}
    })}}

    {{button.default("", {
      text: "icon after",
      icon: {after: "icon-search"}
    })}}

    {{button.default("", {
      text: "disabled",
      isDisabled: true
    })}}
  </div>
{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{# {% set code %}

{% endset %} #}