Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use mailto with material ui?

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.

like image 532
Joumana El Alaoui Avatar asked Dec 14 '22 18:12

Joumana El Alaoui


2 Answers

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>
like image 78
beeftosino Avatar answered May 17 '23 06:05

beeftosino


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]">
like image 42
Joseph Woolf Avatar answered May 17 '23 08:05

Joseph Woolf