vivatura Design System

Button: Primary With Icon Before 

<button class="button button--primary button--outlined" type="button">
    <svg class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.0003 12.9812L7.05158 10.0324L7.64137 9.43303L9.58366 11.3753V4.16699H10.417V11.3753L12.3593 9.43303L12.9491 10.0324L10.0003 12.9812ZM5.51324 15.8337C5.12963 15.8337 4.80935 15.7052 4.55241 15.4482C4.29546 15.1913 4.16699 14.871 4.16699 14.4874V12.4682H5.00033V14.4874C5.00033 14.6157 5.05373 14.7333 5.16053 14.8401C5.26734 14.9469 5.38491 15.0003 5.51324 15.0003H14.4874C14.6157 15.0003 14.7333 14.9469 14.8401 14.8401C14.9469 14.7333 15.0003 14.6157 15.0003 14.4874V12.4682H15.8337V14.4874C15.8337 14.871 15.7052 15.1913 15.4482 15.4482C15.1913 15.7052 14.871 15.8337 14.4874 15.8337H5.51324Z" />
    </svg>
    <span class="text-center justify-center">
        Primary Button with Icon before
    </span>
</button>
 
<button class="button {{ variantClass }} {{ appearanceClass }}" 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 before
variantClass: button--primary
appearanceClass: button--outlined
iconKey: download
iconPosition: before

No notes defined.