Cta button

Default

Do oblíbených

        {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "extra-class",
    tooltip: "Do oblíbených",
    icon: {
      path: "images/svg/favorite.svg",
      color: "primary"
      }
    }
  }
%}

          <span class="cta-button  extra-class --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/favorite.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Do oblíbených</div>

    </span>

Activ

Do oblíbených

        {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    state: "active",
    tooltip: "Do oblíbených",
    icon: {
      path: "images/svg/favorite.svg",
      color: "primary"
      }
    }
} %}

          <span class="cta-button --active  --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/favorite-active.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Do oblíbených</div>

    </span>

Anchor tag

Do oblíbených

        {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "",
    tag: "a",
    url: "#",
    tooltip: "Do oblíbených",
    icon: {
      path: "images/svg/favorite.svg",
      size: "",
      color: "primary"
      }
    }
  }
%}

              <a class="cta-button   --unlogged" href="#">
    <div class="cta-button__wrapper">
                    <span class="icon   --state-active">
      <img src="images/svg/favorite-active.svg"  loading="lazy">
  
  </span>
            <span class="icon   --state-not-active">
      <img src="images/svg/favorite.svg"  loading="lazy">
  
  </span>
            </div>

    
        <div class="tooltip">Do oblíbených</div>

    </a>

Button tag

        {% include "@Components/cta-button/cta-button.twig" with {
  props : {
    extraClass: "",
    tag: "button",
    tooltip: "Do oblíbených",
    icon: {
      path: "images/svg/favorite.svg",
      size: "",
      color: "primary"
      }
    }
  }
%}

          <button class="cta-button   --unlogged">
    <div class="cta-button__wrapper">
                                    <span class="icon">
      <img src="images/svg/favorite.svg"  loading="lazy">
  
  </span>
                        </div>

    
        <div class="tooltip">Do oblíbených</div>

    </button>

Schema

    {
  "props": {
    "extraClass": {
      "type": "string",
      "description": "Extra class of button"
    },
    "url": {
      "type": "string",
      "description": "Url address (default # if tag is a)"
    },
    "state": {
      "type": "string",
      "description": "active"
    },
    "tag": {
      "type": "string",
      "description": "a | button | span (default)"
    },
    "tooltip": {
      "type": "string",
      "description": "Content of tooltip"
    },
    "icon": {
      "type": "object",
      "props": {
        "src": {
          "type": "string",
          "description": "path to icon"
        },
        "size": {
          "type": "string",
          "description": "lg (default) | sm"
        },
        "color": {
          "type": "string",
          "description": "black (default) | primary | white"
        }
      }
    }
  }
}