Buttons

Primary 

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

      
  •           <a class="btn --conversion" href='#'>    <span class="btn__title">Read more</span>
  
  </a>

Outline 

  •         {% include "@Components/button/button.twig" with {props: {
    title: "Add to cart",
    variant: "outline",
  }
} %}

      
  •           <a class="btn --outline" href='#'>    <span class="btn__title">Add to cart</span>
  
  </a>

White 

  •         {% include "@Components/button/button.twig" with {props: {
    title: "Menu",
    variant: "white",
    iconBefore: true,
    variant: "outline",
    icon: {
      src: "svg/ham.svg",
    }
  }
} %}

      
  •           <a class="btn --white  --icon-before" href='#'>    <span class="btn__title">Menu</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.25 15.57"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.57px;}</style></defs><title>menu</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><line class="cls-1" x1="0.78" y1="0.78" x2="20.47" y2="0.78"/><line class="cls-1" x1="0.78" y1="7.78" x2="20.47" y2="7.78"/><line class="cls-1" x1="0.78" y1="14.78" x2="20.47" y2="14.78"/></g></g></svg>
  </span>
    </span>
  </a>

With icon (default right) 

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

      
  •           <a class="btn --conversion   --animation-right" href='#'>    <span class="btn__title">tittle of button</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
    <path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path>
</svg>
  </span>
    </span>
  </a>

With icon on the left side 

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

      
  •           <a class="btn --conversion  --icon-before --animation-zoom" href='#'>    <span class="btn__title">tittle of button</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" 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.3l-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" >
</path>
</svg>
  </span>
    </span>
  </a>

Large variant 

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

      
  •           <a class="btn --conversion --large" href='#'>    <span class="btn__title">Large button</span>
  
  </a>

Small variant 

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

      
  •           <a class="btn --conversion --small" href='#'>    <span class="btn__title">Small button</span>
  
  </a>

Icon only 

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

      
  •           <a class="btn --conversion   --animation-zoom --icon-only" href='#'>
      <span class="btn__icon">
      <span class="icon">
  <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" 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.3l-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" >
</path>
</svg>
  </span>
    </span>
  </a>

Form button 

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

      
  •           <button class="btn --conversion" type="submit">    <span class="btn__title">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 --conversion" href='https://www.google.com/' target="_blank">    <span class="btn__title">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 --conversion">    <span class="btn__title">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",
    extraClass: "js-load-more-button",
  }
} %}

      
  •           <a class="btn --conversion         js-load-more-button" href='#' id="my-unique-button">    <span class="btn__title">extra class + id</span>
  
  </a>

Data attributes 

  •         {% include "@Components/button/button.twig" with {props: {
    title: "data attributes",
    data: {
      add: "add-url",
      remove: "remove-url",
    },
  }
} %}

      
  •           <a class="btn --conversion" href='#' data-add="add-url" data-remove="remove-url">    <span class="btn__title">data attributes</span>
  
  </a>

Schema 

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "variant": {
      "type": "string",
      "description": "primary (default) | outline"
    },
    "tag": {
      "type": "string",
      "description": "a (default) | button | span"
    },
    "size": {
      "type": "string",
      "description": "large | small"
    },
    "position": {
      "type":"string",
      "description": "left (default) | right | center"
    },
    "extraClass": {
      "type": "string",
      "description": "extra class of button"
    },
    "id": {
      "type": "string",
      "description": "id of button"
    },
    "url": {
      "type": "string",
      "description": "Url address (default # if tag is a)"
    },
    "animation": {
      "type": "string",
      "description": "right | zoom"
    },
    "iconBefore": {
      "type": "boolean",
      "description": "Set if icon will be before text"
    },
    "iconOnly": {
      "type": "boolean",
      "description": "Make button icon only."
    },
    "icon": {
      "type": "object",
      "props": {
        "src": "string",
        "description": "path to icon"
      }
    }
  }
}