Link
A link widget provides an interactive reference to a resource, which can be external or within the current page or application. It is a versatile component that can be used in various contexts, such as navigation menus, breadcrumbs, and inline text links.
Import
import { Link } from '@vortex-kit/vortex';
import type { LinkProps } from '@vortex-kit/vortex';Display
<Link isExternal href='https://vortex.design'>Vortex</Link>Allied components
Type
Link component has two type options: plain and underline. The plain type is the default style for links. The underline type adds an underline to the text.
Size
Link component supports two sizes: sm and md. The default size is md.
Show Code
Color
The color of the link can be customized using the color property. Each color is available in both plain and underline types.
Show Code
Weight
The weight of the link can be customized using the weight property. The weight property accepts the common weight names like light, regular, medium, bold, etc.
Show Code
State
Link has disabled state that can be used to prevent users from clicking on the link.
Show Code
External Link
Link has isExternal property that can be used to open the link in a new tab.
Show Code
Icon
Icon can be added to the link using the leftIcon and rightIcon properties. You can use both icons together for enhanced visual appeal.
Show Code
Icon with Text Size Inheritance
Icons automatically inherit the text size from their parent element.
Show Code
Content Integration
Links can be seamlessly integrated within text content for natural reading flow.
Show Code
Accessibility
Links follow the WAI-ARIA Link design pattern and employ appropriate ARIA attributes to ensure accessibility and manage focus behavior.
Key | Description |
|---|---|
Tab | Navigate between links |
Enter Space | Executes the link and moves focus to the link target |