InlineLink
A versatile inline link component with customizable styling, icon support, and target options for creating consistent link experiences throughout your application.
Overview
The InlineLink component provides a consistent way to create inline links within text content. It supports icons, custom styling, and target attributes. The component extends all standard HTML anchor element attributes for maximum flexibility.
Usage
Examples
Basic Usage
Simple inline links with different styling options.
This is a basic inline link in a paragraph.
With Icons
Inline links with icon support for enhanced visual meaning.
With Target Options
Links with different target configurations for external and internal navigation.
This is an inline link that opens in a new tab.
Custom Styling
Inline links with custom styling classes for specific design requirements.
This is an inline link with custom styling.
Features
- Consistent Styling: Uniform link appearance across your application with customizable themes
- Icon Support: Optional icon integration with configurable positioning (left or right)
- Flexible Styling: Extensive customization options through className prop and CSS variables
- Accessibility: Built-in accessibility support with proper ARIA attributes and keyboard navigation
- Target Options: Support for internal and external links with appropriate security attributes
- Responsive Design: Adapts seamlessly to different screen sizes and device types
- Dark Mode Support: Consistent appearance in both light and dark themes
Props
Prop | Type | Default | Description |
---|---|---|---|
href | string | required | The URL the link points to |
label | string | undefined | The text content of the link (optional) |
icon | React.ReactNode | undefined | Optional icon to display with the link |
iconPosition | "left" | "right" | "right" | Position of the icon relative to the label |
className | string | undefined | Additional CSS classes |
...props | React.AnchorHTMLAttributes<HTMLAnchorElement> | - | All standard HTML anchor element attributes |
Accessibility
The InlineLink component is built with accessibility in mind:
- Semantic HTML: Uses proper
<a>
elements with appropriate href attributes - ARIA Attributes: Includes proper ARIA labels and roles for screen readers
- Keyboard Navigation: Full keyboard support with logical tab order and focus management
- High Contrast: Maintains proper contrast ratios for text readability
- Focus Indicators: Clear visual focus states for keyboard navigation
- Screen Reader Support: Announces link purpose and destination appropriately
- Security Attributes: Automatically adds
rel="noopener noreferrer"
for external links - Descriptive Text: Encourages meaningful link text that describes the destination