vivatura Design System

Button: Primary With Icon 

<button class="button button--primary" type="button">
    <span class="text-center justify-center">
        Primary Button with Icon
    </span>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.6923 17.3079L12.9845 16.5886L17.073 12.5001H5V11.5001H17.073L12.9845 7.41163L13.6923 6.69238L19 12.0001L13.6923 17.3079Z" />
    </svg>
</button>
 
<button class="button {{ variantClass }}" type="button">
    {{#if iconKey}}
        {{#if (isPosition iconPosition 'before')}}
            {{#> button-icon }}
                {{> @icon key=iconKey }}
            {{/button-icon }}
        {{/if}}
    {{/if}}
    <span class="text-center justify-center">
        {{ label }}
    </span>
    {{#if iconKey}}
        {{#unless (isPosition iconPosition 'before')}}
            {{#> button-icon }}
                {{> @icon key=iconKey }}
            {{/button-icon }}
        {{/unless}}
    {{/if}}
</button>
 
label: Primary Button with Icon
variantClass: button--primary
iconKey: arrow-right-alt

No notes defined.