Skip to content

Emphasized Link

Alfred J Lin edited this page Mar 12, 2026 · 3 revisions

Design File

Figma link

Overview

The Emphasized Link is a link component designed for links that need to stand out to lead users to a related page. This is different from the inline link that appears within paragraph text.

Usage

When to Use

  • For links that need to stand out for users to notice

When NOT to Use

  • Don't use the emphasized link directly in paragraphs; instead, use Link, which is the default style for the <a> element

Component Structure

Props

Field Data Type Requirement Description Note
Bottom Margin Boolean Optional Adds a bottom margin below the link. Defaults to false. Enable only if this is the last item in the content area.
Component ID String Optional An ID for the component, useful for in-page anchor linking.

Slots

Field Data Type Requirement Description Note
Link Text String Required The text displayed on the emphasized link. Recommended to keep under 50 characters.
Link URL String Required The URL for the emphasized link.

Component Relationships

Button Variants in the Default UMD Design System

  • CTA Button (Primary): Uses the Primary Button style from the UMD Design System for <button> elements
  • Emphasized Link: Replaces the Secondary Button style for <a> elements to maintain semantic HTML

This separation ensures proper distinction between actions (buttons) and navigation (links).

Related Components

  • CTA Button: For actions that trigger processes or state changes
  • Link: For inline links within content

Clone this wiki locally