{{#
    @name Button attributes
    @desc A single button component. Faux is used when a button is displayed inside a link (for example in link blocks).
    @param* label The caption label.
    @param as The wrapping element. Defaults to `a`.
    @param button_type `Inline` if the button needs to be rendered as an inline button.
    @param faux Boolean. For faux button wrapped in an actual button/anchor.
#}}

<!-- /components/_button.antlers.html -->
{{ if label }}
    <{{ as or 'a' }}
        class="
            {{ button_type === 'inline' ? 'button-inline' : 'button' }}
            {{ small ?= 'button--small' }}
            {{ class }}
        "
        {{ slot:attributes }}
        {{ !faux ?= { partial:statamic-peak-tools::snippets/button_attributes } }}
        {{ aria_label ?= 'aria-label="{aria_label}"' }}
    >
        <span>
            {{ link_type == 'email' ? { label | obfuscate_email } : label }}
        </span>

        {{ if target_blank }}
            <span class="sr-only">{{ trans:strings.external_link }}</span>
            {{ svg:external attr:class="ml-1 w-3 h-3 fill-current" attr:aria-hidden="true" attr:alt="" }}
        {{ /if }}
    </{{ as or 'a' }}>
{{ /if }}
<!-- End: /components/_button.antlers.html -->