Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Open link in a new tab when button is clicked

I want it to open in a new tab when the link in my hello button is clicked, how can I get it?

My Code:

 <Button
          href="https://play.google.com/store/apps/dev?id=6411367502435954294"
          type="primary"
          content="Play Store 🛒"
        />

All Code :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import styles from "./contact.module.scss";
import Button from "../Button/Button";
import Social from "../Social/Social";

const Contact = () => {
  return (
    <div className={styles.contactWrapper}>
      <div className={styles.socialWrapper}>
        <Social
          media="linkedin"
          href="https://www.linkedin.com/in/nisaefendioglu/"
        />
        <Social media="github" href="https://github.com/nisaefendioglu" />
        <Social media="twitter" href="https://twitter.com/nisaefendioglu" />
      </div>
      <div className={styles.buttonWrapper}>
        <Button
          href="https://play.google.com/store/apps/dev?id=6411367502435954294"
          type="primary"
          content="Play Store 🛒"
        />
        <Button
          href="mailto:nisaefendioglu0@gmail.com"
          type="secondary"
          content="Contact"
          icon={"paper-plane"}
        />
      </div>
    </div>
    
  );
};

export default Contact;

SCSS

.buttonWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 20rem);
  justify-content: center;
  align-items: center;
  gap: var(--medium-space);
}

Button :

import styles from "./button.module.scss";

const Button = ({ content, icon, type, href }) => {
  return (
    <>
      <a
        className={`${styles.button} ${
          type === "primary" ? styles.primaryButton : styles.secondaryButton
        }`}
        href={href}
      >
        <i className={`fas fa-${ icon }`}></i>
        {content}
      </a>
    </>
  );
};

export default Button;

>Solution :

UPDATED CODE

Add a target="_blank" attribute

<Button
  target="_blank"
  href="https://play.google.com/store/apps/dev?id=6411367502435954294"
  type="primary"
  content="Play Store 🛒"
>
  {/*some code*/}
</Button>;

import styles from "./button.module.scss";

/* Include additional prop target in your button component */

const Button = ({ content, icon, type, href, target }) => {
  return (
    <>
      <a
        target={target}
        className={`${styles.button} ${
          type === "primary" ? styles.primaryButton : styles.secondaryButton
        }`}
        href={href}
      >
        <i className={`fas fa-${icon}`}></i>
        {content}
      </a>
    </>
  );
};

export default Button;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading