MailtoLink

minimal usage

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink to="edx@example.com">
  edx@example.com
</MailtoLink>

<MailtoLink to="edx@example.com">
  edx@example.com
</MailtoLink>

with blank target

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink to="edx@example.com" target="_blank">
  edx@example.com
</MailtoLink>

<MailtoLink to="edx@example.com" target="_blank">
  edx@example.com
</MailtoLink>

with onClick

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink
  to="edx@example.com"
  target="_blank"
  onClick={() => { /* some actions */ }}
>
  edx@example.com
</MailtoLink>

<MailtoLink
  to="edx@example.com"
  target="_blank"
  onClick={() => { /* some actions */ }}
>
  edx@example.com
</MailtoLink>

with subject and body

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink
  to="edx@example.com"
  subject="Check out this mailto component!"
  body="This mailto component is awesome!"
>
  email with subject and body
</MailtoLink>

<MailtoLink
  to="edx@example.com"
  subject="Check out this mailto component!"
  body="This mailto component is awesome!"
>
  email with subject and body
</MailtoLink>

with cc and bcc

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink
  cc="edx@example.com"
  bcc="edx@example.com"
>
  More mail, this time with cc and bcc
</MailtoLink>

<MailtoLink
  cc="edx@example.com"
  bcc="edx@example.com"
>
  More mail, this time with cc and bcc
</MailtoLink>

with multiple cc and bcc

Show editable code example

Any Paragon component or export may be added to the code example.

<MailtoLink
  cc={['foo@example.com', 'bar@example.com', 'baz@example.com']}
  bcc={['foo@example.com', 'bar@example.com', 'baz@example.com']}
>
  edx@example.com
</MailtoLink>

<MailtoLink
  cc={['foo@example.com', 'bar@example.com', 'baz@example.com']}
  bcc={['foo@example.com', 'bar@example.com', 'baz@example.com']}
>
  edx@example.com
</MailtoLink>

Props API#

MailtoLink Props API

to unknown type
Default[]
cc unknown type
Default[]
bcc unknown type
Default[]
subject unknown type
Default''
body unknown type
Default''
target unknown type
Default'_self'
externalLink unknown type
Default{ alternativeText: MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, title: MAIL_TO_LINK_EXTERNAL_LINK_TITLE, }

Usage Insights#

MailtoLink

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	3
frontend-app-course-authoring	22.8.1	9
frontend-app-learner-dashboard	22.9.0	4
frontend-app-learner-portal-enterprise	21.13.1	13
frontend-lib-special-exams	22.7.0	8

Edit this page Leave feedback

Paragon Design System

MailtoLink

minimal usage

with blank target

with onClick

with subject and body

with cc and bcc

with multiple cc and bcc

Props API#

Usage Insights#

MailtoLink

All components (A-Z)

MailtoLink

minimal usage#

with blank target#

with onClick#

with subject and body#

with cc and bcc#

with multiple cc and bcc#

Props API#

Usage Insights#

MailtoLink

All components (A-Z)

minimal usage

with blank target

with onClick

with subject and body

with cc and bcc

with multiple cc and bcc