InlineLink

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.

1
2
3
4

<p>
  This is a basic <InlineLink href="https://example.com" label="inline link" /> in a
  paragraph.
</p>

With Icons

Inline links with icon support for enhanced visual meaning.

1
2
3
4
5
6
7
8
9
10
11
12

<p>
  This is an inline link with an icon on the{" "}
  <InlineLink href="https://unkey.com" label="right" icon={<ExternalLink size={14} />} /> and
  on the{" "}
  <InlineLink
    href="https://unkey.com"
    label="left"
    icon={<ExternalLink size={14} />}
    iconPosition="left"
  />
  .
</p>

With Target Options

Links with different target configurations for external and internal navigation.

1
2
3
4
5
6
7
8
9
10

<p>
  This is an inline link that opens in a{" "}
  <InlineLink
    href="https://unkey.com"
    label="new tab"
    icon={<ExternalLink size={14} />}
    target="_blank"
  />
  .
</p>

Custom Styling

Inline links with custom styling classes for specific design requirements.

1
2
3
4
5
6
7
8
9

<p>
  This is an inline link with{" "}
  <InlineLink
    href="https://unkey.com"
    label="custom styling"
    className="text-warning-11 hover:text-warning-12"
  />
  .
</p>

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

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