title: Open link in a new tab when button is clicked
body: <p>I want it to open in a new tab when the link in my hello button is clicked, how can I get it?</p>
  <p>My Code:</p>
  <pre><code> &lt;Button
            href=&quot;https://play.google.com/store/apps/dev?id=6411367502435954294&quot;
            type=&quot;primary&quot;
            content=&quot;Play Store &quot;
          /&gt;
  </code></pre>
  <p>All Code :</p>
  <pre><code>import styles from &quot;./contact.module.scss&quot;;
  import Button from &quot;../Button/Button&quot;;
  import Social from &quot;../Social/Social&quot;;
  
  const Contact = () =&gt; {
    return (
      &lt;div className={styles.contactWrapper}&gt;
        &lt;div className={styles.socialWrapper}&gt;
          &lt;Social
            media=&quot;linkedin&quot;
            href=&quot;https://www.linkedin.com/in/nisaefendioglu/&quot;
          /&gt;
          &lt;Social media=&quot;github&quot; href=&quot;https://github.com/nisaefendioglu&quot; /&gt;
          &lt;Social media=&quot;twitter&quot; href=&quot;https://twitter.com/nisaefendioglu&quot; /&gt;
        &lt;/div&gt;
        &lt;div className={styles.buttonWrapper}&gt;
          &lt;Button
            href=&quot;https://play.google.com/store/apps/dev?id=6411367502435954294&quot;
            type=&quot;primary&quot;
            content=&quot;Play Store &quot;
          /&gt;
          &lt;Button
            href=&quot;mailto:nisaefendioglu0@gmail.com&quot;
            type=&quot;secondary&quot;
            content=&quot;Contact&quot;
            icon={&quot;paper-plane&quot;}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
    );
  };
  
  export default Contact;
  </code></pre>
  <p>SCSS</p>
  <pre><code>.buttonWrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);
    justify-content: center;
    align-items: center;
    gap: var(--medium-space);
  }
  </code></pre>
  <p>Button :</p>
  <pre><code>import styles from &quot;./button.module.scss&quot;;
  
  const Button = ({ content, icon, type, href }) =&gt; {
    return (
      &lt;&gt;
        &lt;a
          className={`${styles.button} ${
            type === &quot;primary&quot; ? styles.primaryButton : styles.secondaryButton
          }`}
          href={href}
        &gt;
          &lt;i className={`fas fa-${ icon }`}&gt;&lt;/i&gt;
          {content}
        &lt;/a&gt;
      &lt;/&gt;
    );
  };
  
  export default Button;
  </code></pre>