Quiero que se abra en una nueva pestaña cuando se haga clic en el enlace de mi botón de saludo, ¿cómo puedo obtenerlo?
Mi código:
<Button href="https://play.google.com/store/apps/dev?id=6411367502435954294" type="primary" content="Play Store 🛒" />Todo el código:
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); }Botón :
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;CÓDIGO ACTUALIZADO
Agrega un atributo target="_blank"
<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;