Open link in a new tab when button is clicked

Question

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 :

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;

Is `Button` a custom component?, as the `href` should be applied to `a` not a `button`. — Mina, Jul 30 '22 at 07:08
.buttonWrapper { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, 20rem); justify-content: center; align-items: center; gap: var(--medium-space); } @PratikWadekar — Nisa Efendioglu, Jul 30 '22 at 07:12
@NisaEfendioglu, we need to see the code of the `Button` component not the SCSS, I see you import `import Button from "../Button/Button";`please output the code of that component. — Mina, Jul 30 '22 at 07:15
import styles from "./button.module.scss"; const Button = ({ content, icon, type, href, target }) => { return ( <> {content} > ); }; export default Button; — Mina, Jul 30 '22 at 07:17
I can't add an answer as the question submitted as duplicated, you can use this code, and then set a `target="_blank" for the button, and it should work. — Mina, Jul 30 '22 at 07:19
[many more examples](https://www.google.com/search?q=prop+target+how-to-open-a-link-in-a-new-tab-in-nextjs+site:stackoverflow.com) — mplungjan, Jul 30 '22 at 07:30

Pratik Wadekar · Accepted Answer · 2022-07-30T07:19:31.273

2

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;

edited Jul 30 '22 at 07:19

answered Jul 30 '22 at 07:06

Pratik Wadekar

1,198
8
15

Unfortunately, I tried this code too, but it opens on the same page. – Nisa Efendioglu Jul 30 '22 at 07:08
Could you elaborate more as to how your Button component is built. Or are you using any component library ? – Pratik Wadekar Jul 30 '22 at 07:10
I shared all my code now – Nisa Efendioglu Jul 30 '22 at 07:11
use inside tag – Manoj Tolagekar Jul 30 '22 at 07:12

Open link in a new tab when button is clicked

1 Answers1