MailtoLink

minimal usage

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

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

with blank target

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

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

with onClick

<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

<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

<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

<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>

MailtoLink Props API

children node Required Required
Content of the MailToLink
className string Required
Custom class names for the MailToLink
to emailPropType Required[] Required | emailPropType Required Required
Specifies the email's recipients
Default[]
cc emailPropType Required[] Required | emailPropType Required Required
Specifies the email's carbon copy recipients
Default[]
bcc emailPropType Required[] Required | emailPropType Required Required
Specifies the email's blind carbon copy recipients
Default[]
subject string Required
Specifies the email's subject
Default''
body string Required
Specifies the email's body
Default''
target string Required
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 Required
Specifies the callback function when the link is clicked
Defaultnull
externalLink shape Required {
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, }

Paragon Design System

MailtoLink

minimal usage

with blank target

with onClick

with subject and body

with cc and bcc

with multiple cc and bcc

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

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#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

minimal usage

with blank target

with onClick

with subject and body

with cc and bcc

with multiple cc and bcc