Link

Anatomy

Guidelines

Links vs Buttons

As design trends have evolved over time, it's become more commonplace to style hyperlinks similarly to buttons. This is helpful for creating eye-catching calls-to-action but may encourage button misuse. It's important to know the fundamental difference between hyperlinks and buttons as they are not functionally interchangeable:

• Hyperlinks, also known as links or anchors, use URLs to navigate to a new location, download a file, or link to an email address or phone number.
• Buttons are primarily used to perform an action on the current page such as opening a modal or drawer or submitting a form.

When to use as buttons

With the correct component props, Pluma Links can be safely used as buttons as the underlying HTML will be updated. When using Links as actions, prefer to use them within inline text.

External links

When linking to a URL outside of the application, mark it as external and use an appropriate trailing icon to denote it as such. External links open in a new tab with the correct safe HTML attributes already applied.

Best practices

Clickable regions

Wrap only the necessary text within a Link that gives the user the best context on where the Link goes or what action it performs.

Icon usage

Icons add visual context to a Link but should not replace the label. Use a leading icon when to clarify the destination and a trailing exit icon for external links.

Types

Appearance

Variants

Icons

Icons add visual context to Links. Common icons are helpful for the user to understand the Link's purpose or destination, or if it may be external.

Custom icons

If a Pluma icon doesn't fit the context, a custom icon may be supplied. By default, custom icons are subject to the same rules as standard Pluma icons. They will render at the same default size and can be placed in the leading or trailing position.

Positioning and alignment

Icons can be placed in the leading position before the label or the trailing position after the label. Leading and trailing icons both have their vertical alignments set to a default value that can also be adjusted.

Size

All icons default to small, but can be set to one of the following preset sizes:

• fill
• xxs
• xs
• sm
• md
• lg
• xl

Underline

Secondary Links are underlined by default to visually distinguish them from surrounding body text. If the underline is removed, the font weight updates to bold. Primary Links use color and font weight to differentiate from surrounding text and elements. If the underline is added, its font weight updates to match surrounding body text.

Behaviors

States

Content

When interacting with a site or app, it's common for users to scan the page for links to supplemental information or new pages. When using Links, be sure to write labels that accurately describe where the Link goes or what action it will perform.

Action links

When using Links as inline Buttons, use a verb or short verb phrase that best describes the action taking place.

Inline links

When using Links in a sentence, make them a natural and descriptive part of the sentence structure. Avoid using ambiguous phrases like "click here" as they offer no context for users to understand their destination or action.

Truncation

Links do not truncate within smaller containers and viewports by default but truncation can be enabled. Be sure to consider writing descriptive labels so truncated Links may still be understood when text is clipped.