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>

Primary disabled 

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

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

Outline disabled 

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

      
  •           <a class="btn --outline          --disabled" 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: "images/svg/ham.svg",
    }
  }
} %}

      
  •           <a class="btn --white  --icon-before" href='#'>    <span class="btn__title ">Menu</span>
        <span class="btn__icon ">
      <span class="icon">
      <img src="images/svg/ham.svg"  loading="lazy">
  
  </span>
    </span>
    </a>

With icon (default right) 

  •         {% include "@Components/button/button.twig" with {props: {
    title: "tittle of button",
    animation: "right",
    icon: {
      src: "images/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">
      <img src="images/svg/chevron-right.svg"  loading="lazy">
  
  </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: "images/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">
      <img src="images/svg/clock.svg"  loading="lazy">
  
  </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: "images/svg/clock.svg",
    }
  }
} %}

      
  •           <a class="btn --conversion    --animation-zoom --icon-only" href='#'>      <span class="btn__icon ">
      <span class="icon">
      <img src="images/svg/clock.svg"  loading="lazy">
  
  </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"
      }
    }
  }
}