Link
Connect Content, Seamlessly
The Link component enables you to create fully customizable hyperlinks, both internal and external, with consistent behavior, theme control, and accessible enhancements. Whether you’re linking to another page, an external resource, a downloadable asset, or a phone number, this component ensures every click delivers the right user experience.
Wrapped around any content block you choose, it’s perfect for CTAs, menus, image links, and rich-text interactions, providing complete flexibility with built-in accessibility, theming, and active state styling.
Navigate anywhere, however you want
Internal & External Targets.
All in one consistent interface.Any Content Inside.
Structure your links how you need.Set link titles and ARIA labels.
Enhance UX and accessibility.
Smart Styling & States
Custom Themes.
Integrate links seamlessly into your design.Highlight current pages in menus.
Make navigation crystal clear.Differentiate exact vs. partial matches.
Fine-tuned navigation control.
Use Cases
The Link component can be used across a wide variety of scenarios:
CTA buttons or text links within content
Navigation elements and menus
Linking media like icons, images, or cards
External redirects to partner or social sites
Deep-linking between language versions of pages
Email (mailto:), phone (tel:), or asset downloads
Its true power lies in combining flexible destinations with any layout or content you need wrapped inside.
Configuration Options & Features
The Link component is your flexible connector, whether you’re building intuitive navigation or stylish call-to-actions.
With responsive theming, smart active states, and accessibility-first design, every link you create with Vertex Forge is powerful, polished, and ready to perform.
Wrap anything. Link everywhere. Stay accessible.
Path
Defines the actual destination of the link.
Can be:
An internal page reference (e.g., /about)
An external URL (e.g., https://example.com)
A media asset
An email (mailto:)
A phone number (tel:)
Content
Wrap any content components inside the link, which makes the component suitable for minimal links or rich media interactions.
Examples:
Text
Buttons
Icons
Entire cards or containers
Title
Optional hover title attribute.
Displayed as a tooltip when the user hovers over the link.
Helpful in giving additional context or clarifying external destinations.
Aria Label
Optional accessibility label.
Provides screen readers with information about what the link leads to.
This enhancement improves usability for all users and ensures compliance with WCAG standards.
Component Theme
Apply a design theme to the entire link element.
Useful for setting:
Color
Font weight
Underlines or hover effects
Spacing and responsiveness
Active Element Theme
Applies a theme if the link matches part of the current route.
Great for menus or breadcrumb trails that show which section is currently active.
Exact Active Element Theme
Applies a theme only if the link exactly matches the current route.
Ideal for precise navigation scenarios, such as sidebar menu highlights or tabs.