The Link component is crafted to navigate marketers to different locations within our product or to external websites. It plays a crucial role in creating a seamless, interconnected experience, particularly for marketers who often engage in building, iterating, and analyzing content directly within Iterable .
Design
Structure
Link: Provides context to the link and where it leads
New tab icon (Open16): if the link opens up a new tab, regardless if it is an external or internal location, an icon should be used. This helps provide affordance to the marketer that by clicking the link, they’ll be taken to a new tab.
Sizes
Body2 (default): the standard size of links that matches most of the content throughout the Iterable platform. Icon size is 14x14px to match font.
Caption: used in situations like help text below an input, or when the link is a part or near other caption-sized text. Icon size is 12x12px to match font.
Body 1 (use sparingly): this is commonly seen in empty state messages or places where the surrounding text uses the body1 style. Icon is 16×16px to match font height.
Body 2
Caption
Variants
Standalone: Positioned independently, outside of text blocks, for clear navigation or calls to action.
New tab: Signals that the link will create a new tab that may lead to either an internal or external site, accompanied by an icon to indicate this
Inline (use sparingly): Embedded within sentences or paragraphs to link related content.
States
Default: The initial appearance of the link.
Hover: Style changes when the mouse hovers over the link to indicate interactivity.
Active: Shows when the link is being clicked.
Focused: When the link has been focused using the keyboard.
Styles
Default: The standard appearance of the link. This should be used in most cases for links as it provides a clear visual indicator that the string of text is a link.
Monochrome: This should be used sparingly, when the link is secondary or tertiary to the resource—for example, a messaging insights link on the Campaign index.
Inherited: special circumstance, when the link is used inside of a container with a colored background—it should inherit the color of the surrounding text. For example, a Banner.
Guidelines
Use cases
Navigating to related content: Facilitate marketers in connecting campaigns to pre-created lists or related pages—like Template revision history.
Support documentation: Links to a related support document within support.iterable.com
External resources: Directs marketers to external articles, research, or tools relevant to marketing strategies.
Downloading assets: Enables marketers to download campaign assets or reports.
Do
Utilize links for navigation or changing the URL within Iterable.
Clearly describe the link's destination or action to set accurate expectations for marketers.
Don't
Resort to links for actions that don't navigate or alter the URL, like triggering modal dialogs; buttons are more appropriate for these actions within Iterable (see “When to us a Link vs Button)
Manually modify the colors (unless on a colored background), spacing, or text styles of the links—this makes it confusing to marketers to understand what is a link and what is not, and it makes global updates to the component less predictable.
Overwhelm or confuse marketers with excessive links.
When to open a new tab
New tab
Accessing External Resources: If the link directs marketers to external websites or resources that are not part of the Iterable platform. This allows users to view additional information without leaving their current workflow in Iterable.
Preserving User Progress: In scenarios where marketers are engaged in tasks that might not be saved automatically, like form filling or creating a campaign. Opening a new tab for additional information or actions ensures that their progress is not lost.
Reference Material: When the link points to reference materials, documentation, or help guides that marketers might want to view alongside their current task.
Same tab
Navigating Internally: For links that direct marketers to another part of the Iterable platform. Keeping navigation in the same tab promotes a seamless experience and prevents the accumulation of unnecessary open tabs, which can be confusing and overwhelming.
Streamlined Workflows: In cases where you want to ensure a linear workflow or guide marketers through a specific process within Iterable. Opening a new tab could disrupt the flow and distract users from the task at hand.
Frequent, Routine Actions: For actions that are part of the marketers' regular workflow within Iterable. Constantly opening new tabs for these actions can lead to a cluttered browser and a disjointed experience.
Consider the need for the link and how its information might be used in that context. For example, is the link used to reference contextual data? A popover with this information might provide marketers with the context they need to move forward, while still providing the ability to click on the link if they need more information.
When to use a Link vs Button
Use a button when
Initiating an Action: If the element triggers an action such as submitting a form, opening a modal, or any other interaction that doesn't navigate to a new page or URL, use a button.
Form Submissions: In the context of submitting forms, buttons are the standard, facilitating operations like saving settings, sending messages, etc.
Interactive Commands: For elements that perform specific commands within the application, like opening a dropdown, toggling settings, or any other non-navigation action.
Use a link when
Navigating to a Different Page or View: If the primary purpose is to take the marketer to a new page within Iterable or to an external site, opt for a link.
Directing to External Resources: Links are the go-to for directing marketers to external websites, articles, or tools that are not part of the core application UI but are relevant to their tasks or interests.
Referencing Internal Paths: For guiding marketers to different sections within Iterable, such as help documents, campaign details, or analytics reports, links ensure a smooth transition.
Example (dos/donts)
Content
Concise and descriptive: Keep link text brief but informative about the link's destination or action.
Action-oriented: Begin with action verbs when suitable, especially for actions like downloading or accessing tools.
Accessibility
Ensure links are focusable with a visible focus state for keyboard navigation.
Apply `aria-label` for links lacking descriptive text or needing additional context.
For external links, use `rel="noopener"` to enhance security.
Maintain appropriate contrast ratios for text and background colors to ensure readability for all users, including those with visual impairments.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova