Link

Usage

• Use Link for navigation to a new page, file, or external resource.
• Use Link as an inline button (onClick without href) when an action needs link styling within inline text — the component renders as a <button> element automatically.
• Prefer Link for inline text actions. Prefer Button for standalone CTAs and non-navigational actions (e.g., opening a modal, submitting a form).
• Links and Buttons are not functionally interchangeable — links navigate via URLs, buttons perform actions on the current page.
• Mark external links with isExternal to open them in a new tab with safe HTML attributes (target="_blank" rel="noopener noreferrer"). Add a trailing exit icon to denote external links.

Types

• Regular link — provide href to navigate to a page, file, or external resource.
• Button link — provide onClick without href to trigger an inline action while maintaining link styling. The component renders as a <button> element automatically.

Variants

• variant="primary" — use for standalone links. Differentiates from surrounding text with accent color and bold font weight. No underline by default.
• variant="secondary" — use for inline links within body text. Underlined by default to distinguish from surrounding text.

Appearance

• Add an underline to primary links with isUnderlined when extra emphasis is needed. Adding an underline updates the font weight to match body text.
• Remove the underline from secondary links with isUnderlined={false} when the link is already visually distinct. Removing the underline updates the font weight to bold.
• Use icon to render a Pluma icon or iconSrc to render a custom image icon. Never use an icon without a text label.
• Use iconPosition="leading" (default) to guide users on the link's destination. Use iconPosition="trailing" to indicate an external link or continued workflow.
• Use a trailing exit icon for external links (icon="exit" iconPosition="trailing").
• Override icon vertical alignment with iconAlignment — defaults to uppercase for leading icons and lowercase for trailing icons.
• Set icon size with iconSize — accepts fill, xxs, xs, sm (default), md, lg, xl.

Behaviors

• Loading state (isLoading) — overlays a spinner on the link content and disables interaction.
• Disabled state (isDisabled) — prevents interaction and applies muted text color.
• Danger state (isError) — applies critical color styling to communicate a destructive action or error condition.
• Enable truncation with truncate when the link may overflow its container.

Content

• Use sentence case for link text.
• Write descriptive labels that make sense in isolation — never use "click here" or generic phrases.
• Wrap only the most meaningful text in a link, not entire sentences or paragraphs.
• For action links (button type), use a specific action verb or short verb phrase (e.g., "Manage identities").
• Embed inline links naturally in the sentence structure.

Implementation Notes

• Link extends PlainLink and inherits href, isDisabled, isExternal, withSafeExternalAttributes, and replace props.
• Auto-loading (autoLoading, default true) — automatically shows the spinner when onClick returns a promise. Set autoLoading={false} to control loading state manually via isLoading.
• Use withSafeExternalAttributes={false} to turn off the automatic target="_blank" rel="noopener noreferrer" for non-HTTP protocols like mailto: or tel:.
• The design doc heading says "Danger" but the prop is isError — use isError in code.
• React: pass content as children. Ember: pass content via {{yield}} (default block).
• Ember invocation: <PlumaLink @href="#" @variant="primary">Label</PlumaLink>.