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

children node Required
Content of the MailToLink
className string
Custom class names for the MailToLink
to emailPropType[] | emailPropType
Specifies the email's recipients
Default[]
cc emailPropType[] | emailPropType
Specifies the email's carbon copy recipients
Default[]
bcc emailPropType[] | emailPropType
Specifies the email's blind carbon copy recipients
Default[]
subject string
Specifies the email's subject
Default''
body string
Specifies the email's body
Default''
target string
Specifies where the link should open. The default behavior is _self, which means that the URL will be loaded into the same browsing context as the current one
Default'_self'
onClick func
Specifies the callback function when the link is clicked
Defaultnull
externalLink shape {
alternativeText: isRequiredIf(PropTypes.string, props => props.target === '_blank'),
title: isRequiredIf(PropTypes.string, props => props.target === '_blank'),
}
The object that contains the alternativeText and title fields which specify the text and title for links with a _blank target (which loads the URL in a new browsing context).
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	20.46.3	3
frontend-app-course-authoring	21.5.6	8
frontend-app-learner-dashboard	20.46.2	4
frontend-app-learner-portal-enterprise	20.45.4	10
frontend-lib-special-exams	20.44.0	8

Edit this page Leave feedback

Paragon Design System

Theme

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)

Theme

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