Media & Interactive Components
Relevant source files
The following files were used as context for generating this wiki page:
React Email provides a specialized set of components to handle media assets and interactive elements within email templates. These components manage the archaic markup and CSS limitations inherent in email clients, ensuring that images, buttons, and links render consistently across platforms like Gmail, Outlook, and Apple Mail.
Media components facilitate the inclusion of images and visual dividers, while interactive components provide styled hyperlinks and button structures that circumvent common layout issues. These elements are designed to work seamlessly with the Tailwind component for utility-based styling.
Sources: README.md:16-25, skills/react-email/SKILL.md:65-80
Interactive Components
Interactive components allow users to navigate to external resources. React Email provides the Button and Link components to handle these interactions safely within the constraints of email clients.
Button Component
The Button component renders a hyperlink styled to appear as a button. It includes specific workarounds to ensure consistent padding and alignment, particularly in Microsoft Outlook.
- Box Sizing: You must include the
box-borderclass to prevent padding from overflowing the button width. - Display: Buttons are rendered as
inline-blockby default to support height and width properties. - Outlook Support: The component manages padding issues specific to Outlook to maintain the intended visual structure.
Sources: skills/react-email/references/COMPONENTS.md:120-135, skills/react-email/SKILL.md:125-135, packages/editor/src/core/serializer/compose-react-email.spec.tsx:285-300
Link Component
The Link component provides standard hyperlink functionality. It supports web pages, email addresses, and other URL protocols.
- Default Target: Links default to
target="_blank"for external navigation. - Theming: In the Editor context, links receive theme-resolved colors and text-decoration (typically blue and underlined) unless overridden by user styles.
Sources: skills/react-email/references/COMPONENTS.md:137-145, packages/editor/src/extensions/link.spec.ts:85-95
Interactive Component Properties
| Component | Required Props | Key Optional Props | Purpose |
|---|---|---|---|
Button | href | target, className | Styled link for primary actions |
Link | href | target, className | Standard inline or block hyperlinks |
Sources: skills/react-email/references/COMPONENTS.md:120-145
Media Components
Media components handle visual assets and content separation.
Img Component
The Img component displays images. Due to email client restrictions, images must follow strict delivery and accessibility rules.
- Absolute URLs: All image sources (
src) must use absolute URLs hosted on a CDN or public server. - Fixed Dimensions: You should specify
widthandheightin pixels to prevent layout shifts during email loading. - Formats: Only PNG and JPEG formats are supported; SVG and WEBP images must be avoided as they do not render in many clients.
- Accessibility: The
altattribute defaults to an empty string for decorative images but must be descriptive for meaningful content.
Sources: skills/react-email/references/COMPONENTS.md:147-165, skills/react-email/SKILL.md:110-120, skills/react-email/references/STYLING.md:100-115
Hr Component
The Hr component renders a horizontal divider.
- Explicit Styling: Email clients do not inherit border types. You must explicitly set a border style (e.g.,
border-solid) for the divider to appear.
Sources: skills/react-email/references/COMPONENTS.md:167-171, skills/react-email/SKILL.md:125-135
Media and Interaction Logic
The system processes these components through a serialization layer, especially when used within the React Email Editor, to ensure they meet email client standards.
Processing Flow
The following diagram illustrates how interactive and media components are processed from React code to email-ready HTML.
The diagram shows the conversion path from React definitions to final HTML, emphasizing the mandatory move to inline styles and client-specific resets.
Sources: skills/react-email/SKILL.md:100-105, packages/editor/src/core/serializer/compose-react-email.spec.tsx:320-340
Reset Style Summary
During serialization (conversion to final HTML), specific styles are automatically applied to ensure compatibility:
| Component | Applied Reset Style | Reason |
|---|---|---|
Button | display: inline-block | Enables width/height/padding support |
Button | box-sizing: border-box | Prevents padding from breaking button width |
Img | max-width: 100% | Ensures responsiveness within containers |
Img | display: block | Removes unwanted whitespace below images |
Hr | border-top-width: 1px | Forces visibility across various clients |
Sources: packages/editor/src/core/serializer/compose-react-email.spec.tsx:285-350, packages/react-email/src/components/tailwind/utils/tailwindcss/tailwind-stylesheets/index.ts:700-710
Accessibility Standards for Media
React Email enforces accessibility through component defaults and authoring requirements.
- Linked Images: When an
Imgis nested inside aLinkorButton, thealttext must describe the link destination rather than the image content. An emptyalt=""on a linked image makes the link inaccessible to screen readers. - Decorative vs Meaningful: Authoring guidelines require explicit
alt=""for decorative assets (spacers, flourishes) and descriptive text for meaningful assets. - Role Presentation: Structural elements like
SectionandRoware rendered withrole="presentation"by default to prevent screen readers from announcing them as data tables.
Sources: skills/react-email/SKILL.md:200-220, skills/react-email/references/COMPONENTS.md:84-90
Summary
Media and Interactive Components in React Email provide a abstraction over standard HTML elements. By enforcing absolute URLs for images and applying automatic resets for buttons and dividers, these components mitigate the technical difficulties of email development. They serve as the primary bridge for user interaction and visual storytelling within the React Email ecosystem.
Sources: README.md:16-25, skills/react-email/SKILL.md:65-80