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.26.3	3
frontend-app-course-authoring	20.32.0	3
frontend-app-learner-dashboard	20.19.0	3
frontend-app-learner-portal-enterprise	20.31.1	7
frontend-lib-content-components	20.32.0	1
frontend-lib-special-exams	20.22.4	8

Paragon Design System

Theme

PlaygroundBeta

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

PlaygroundBeta

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