Lily Design System™

Email Link

An email link displays an email as a clickable mailto link. When clicked, it opens the user's default email client with the address pre-filled. This is the read-only companion to EmailAddressInput, used for displaying email addresses in profiles, contact lists, or user cards.

Example

Show demo markup 
<a class="email-link" href="mailto:example@example.com">example@example.com</a>
Usage example 
<EmailLink email="support@example.com" label="Email our support team" />
Show Svelte source 
// In your Svelte component:
import EmailLink from "lily-design-system-svelte-headless/components/EmailLink/EmailLink.svelte";

<EmailLink>EmailLink</EmailLink>

Usage

Email link on a contact page:

<EmailLink email="support@example.com" label="Email our support team" />

Email link in a user profile card:

<EmailLink email="alice@example.com" />

Props

  • email: string (required) -- the email address to display and link to
  • label: string (default: undefined) -- optional accessible label override via aria-label
  • ...restProps: unknown -- additional attributes spread onto the <a> element

Keyboard Interactions

None -- this is a standard <a> link; keyboard behavior (Tab to focus, Enter to activate) is provided natively by the browser.

ARIA

  • aria-label="..." -- optional override for the accessible name when the visible email text alone is insufficient context

When to Use

  • Use to display an email address as a mailto: hyperlink.
  • Use when users should be able to click to open their email client.
  • Use on contact pages, user profiles, business listings, and support sections.

When Not to Use

  • Do not use for entering an email address -- use EmailInput instead.
  • Do not use for non-email links -- use ActionLink instead.
  • Do not use when the email should be displayed as plain non-interactive text.

Headless

This headless component provides an <a> element with href="mailto:{email}", the email address as visible link text, and optional aria-label override for additional context. The consumer provides all visual styling for the link appearance.

Styles

The consumer provides all CSS styling. The component renders with a .email-link class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <a> element with class email-link
  • Verify aria-label="..."` -- optional override for the accessible name when the visible email text alone is insufficient context
  • Verify pass-through attributes are applied

Advice

  • Designers: Style the email link consistently with other hyperlinks in your design system. Consider adding an email icon to visually indicate the mailto behavior.
  • Developers: Use the label prop to provide additional accessible context when the email address alone is ambiguous (e.g., when multiple email links appear on the same page).

Implementation Notes

  • Renders an <a> element with href="mailto:{email}" for native email client integration
  • Displays the email address as visible link text
  • Supports an optional aria-label override for cases where additional context is needed
  • Spreads restProps for consumer customization

Related components

  • email-input — an input for entering an email address <input type="email">
  • tel-link — a tel hyperlink for a telephone number

References

  • MDN mailto: links: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_email_address

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: email-link
  • PascalCase: EmailLink
  • Description: a mailto hyperlink for an email address
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <a>
  • CSS class: .email-link
  • Interactive: no

ARIA

  • aria-label="..." -- optional override for the accessible name when the visible email text alone is insufficient context

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • email: string (required) -- the email address to display and link to
  • label: string (default: undefined) -- optional accessible label override via aria-label
  • ...restProps: unknown -- additional attributes spread onto the <a> element