Buttons

Primary 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Read more",
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='#'>
      <span class="btn__title u-z-index-1">
      Read more
    </span>
      
  
  </a>

Outline 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Add to cart",
  variant: "outline",
  animation: "zoom",
  icon: {
    src: "@Images/svg/arrow-down-right.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline   --animation-zoom" href='#'>
      <span class="btn__title u-z-index-1">
      Add to cart
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>

With icon (default right) 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "tittle of button",
  animation: "zoom",
  icon: {
    src: "@Images/svg/arrow-down-right.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary   --animation-zoom" href='#'>
      <span class="btn__title u-z-index-1">
      tittle of button
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>

With icon on the left side 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "tittle of button",
  animation: "zoom",
  icon_before: true,
  icon: {
    src: "@Images/svg/clock.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary   --animation-zoom --icon-before" href='#'>
      <span class="btn__title u-z-index-1">
      tittle of button
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>

Size - sm 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Small button",
  size: "sm",
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm" href='#'>
      <span class="btn__title u-z-index-1">
      Small button
    </span>
      
  
  </a>

Size - xs 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "xs button",
  size: "xs",
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs" href='#'>
      <span class="btn__title u-z-index-1">
      xs button
    </span>
      
  
  </a>

Icon only 

  •         {% include "@Components/button/button.twig" with {props: {
  icon_only: true,
  animation: "zoom",
  icon: {
    src: "@Images/svg/clock.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary   --animation-zoom  --icon-only" href='#'>
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>

Icon only - sm 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "tittle of button",
  animation: "zoom",
  size: "sm",
  icon_only: true,
  icon: {
    src: "@Images/svg/clock.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm  --animation-zoom  --icon-only" href='#' title="tittle of button">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>

Icon only - xs 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "tittle of button",
  animation: "zoom",
  size: "xs",
  icon_only: true,
  icon: {
    src: "@Images/svg/clock.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs  --animation-zoom  --icon-only" href='#' title="tittle of button">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>      </span>
    </span>
  
  </a>

Form button 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Button html tag",
  tag: "button",
  type: "submit",
}} %}

      
  •           <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" type="submit" aria-label="Button html tag">
      <span class="btn__title u-z-index-1">
      Button html tag
    </span>
      
  
  </button>

Button as link 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "button as link",
  url: "https://www.google.com/",
  blank: true,
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary" href='https://www.google.com/' target="_blank">
      <span class="btn__title u-z-index-1">
      button as link
    </span>
      
  
  </a>

Button as span

  • button as span 
  •         {% include "@Components/button/button.twig" with {props: {
  title: "button as span",
  tag: "span",
}} %}

      
  •           <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary">
      <span class="btn__title u-z-index-1">
      button as span
    </span>
      
  
  </span>

Assign extra class and Id 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "extra class + id",
  id: "my-unique-button",
  extra_class: "js-load-more-button",
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary          js-load-more-button" href='#' id="my-unique-button">
      <span class="btn__title u-z-index-1">
      extra class + id
    </span>
      
  
  </a>

Full width 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Full width",
  full_width: true
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary        --full-width w-100" href='#'>
      <span class="btn__title u-z-index-1">
      Full width
    </span>
      
  
  </a>

Full width on mobile breakpoint 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Full width on mobile",
  full_width_mobile: true
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary      --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Full width on mobile
    </span>
      
  
  </a>

Primary disabled 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Read more",
  disabled: true,
  icon: {
    src: "@Images/svg/arrow-down-right.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary  --disabled" href='#'>
      <span class="btn__title u-z-index-1">
      Read more
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>

Outline disabled 

  •         {% include "@Components/button/button.twig" with {props: {
  title: "Read more",
  disabled: true,
  variant: "outline",
  icon: {
    src: "@Images/svg/arrow-down-right.svg",
  }
}} %}

      
  •           <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline  --disabled" href='#'>
      <span class="btn__title u-z-index-1">
      Read more
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>