Unkey
Components

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

import { InlineLink } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <InlineLink href="/docs">Documentation</InlineLink>
      <InlineLink href="https://example.com" target="_blank">
        External Link
      </InlineLink>
      <InlineLink href="/help" icon={<HelpIcon />}>
        Help Center
      </InlineLink>
    </div>
  );
}

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.

This is an inline link with an icon on the right and on the left.

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

PropTypeDefaultDescription
hrefstringrequiredThe URL the link points to
labelstringundefinedThe text content of the link (optional)
iconReact.ReactNodeundefinedOptional icon to display with the link
iconPosition"left" | "right""right"Position of the icon relative to the label
classNamestringundefinedAdditional CSS classes
...propsReact.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

On this page