How to use mailto with material ui?

Question

Trying to find how to use mailto in material UI. I tried just using a simple tag within a ListItem, I tried using

<ListItem button component={Link} mailto='' />

I also tried

<ListItem button >
   <i class="material-icons mail_outline">mail_outline</i>
   <ListItemText primary="Support" />
  <a href="mailto:[email protected]"></a>
</ListItem>

I tried to find information about this on material-UI's website & Github but nothing. I would really appreciate some help.

Healion

Answer 1

I based mine on @Gary Vernon Grubb's answer, and added it into a button.

<Button
   variant="contained"
   size="large"
   color="primary"
   target="_top"
   rel="noopener noreferrer"
   href={`mailto:[email protected]`}
>
   <Typography variant="button" style={{ fontSize: '0.69rem' }}>
      Send Documents
   </Typography>
</Button>

Gelhar

How does one open the mailto in a new tab? – Novick

Answer 2

If you set the component equal to a (the hyperlink tag), you can then use the href attribute to set the e-mail.

Thus, you'll get the following line.

<ListItem button key="Email" component="a" href="mailto:[email protected]">

Cadre

Answer 3

Mailto is a Uniform Resource Identifier (URI) scheme for email addresses. It is used to produce hyperlinks on websites that allow users to send an email to a specific address without first having to copy it and enter it into an email client.

<ListItem>
   <a href="mailto:[email protected]" target="_top">Send Mail</a>
</ListItem>

Above code works well for me in ReactJs with Material-UI library included.

Paederast

How does one open the mailto in a new tab? – Novick

Answer 4

This is how I do it with material-ui:

    <FormControlLabel
        control={
            <a target="_top"
                rel="noopener noreferrer"
                href="mailto:[email protected]">
                <IconButton color="primary">
                    <EmailOutline /> {/* icon */}
                </IconButton>
            </a>
        }
        label={"[email protected]"}
        labelPlacement="end"
    />

Pyromagnetic

How does one open the mailto in a new tab? – Novick