Hyperlink
Overview
Hyperlinks allow users to move to another page, view, or external resource.
The Hyperlink component supports two types:
- Default
- Text Only
Hyperlink supported three states:
- Text Only
- Text & Icon
- Icon Only
Default
The Default section defines the standard, non-hovered appearance of a hyperlink.
Text Only
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Text + Icon
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Icon Only
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Hover
The Hover section defines the visual feedback when the user hovers over a clickable hyperlink.
Text Only
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Text & Icon
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Icon Only
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Hover states must clearly indicate that the hyperlink is clickable.
✨ Cursor should change to pointer for all interactive hyperlink states.
✨ Text + Icon and Icon Only hyperlinks should have a sufficiently large clickable area.
✨ Icon-only hyperlinks should use universally recognizable icons.
✨ Avoid using hyperlinks for non-navigation actions.
✨ Keep hyperlink labels short, clear, and meaningful.
✨ Ensure visual consistency across all hyperlink types and states.
Figma
All details and specifications in the design can be referenced through the Figma link below.