MailToLink

The MailToLink component renders a link that opens the user’s default email client with a pre-filled email.

<MailToLink
    email="Emilio_Konopelski27@hotmail.com"
    subject="Curiositas pecco harum stillicidium illo vergo."
    body="Pauper deleniti bibo solutio solus depraedor usque antepono. Turba conspergo tenetur subvenio tollo tenax terreo. Temperantia ullam suppellex decerno."
  />

Features

Scraper Protection

In order to prevent email harvesting bots from scraping the email address, the component makes it slightly harder to find in two ways.

• First, the email address that is rendered as text is split at the @ symbol and rendered separately, to make pattern matching more difficult. You can see this in the Anatomy.
• Second, the href attribute with the mailto: link is not applied to the element initially. Instead, it is set when the user interacts with the link by clicking, focusing, hovering, or pressing down on it.

Anatomy

Reference

MailToLinkProps

The MailToLink component accepts all props from the Link component, except for href.

Tokens

The MailToLink component uses the tokens from the link component.