Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add link
Copy

Usage

Copyimport { Link } from '@/components/ui/link';

Copy<Link href='/profile'>Go to Profile</Link>

Copy<Link href='https://example.com' browser='external'>
  Open in Browser
</Link>

Examples

API Reference

Link

The main link component that handles navigation and external URL opening.

All other props from expo-router's Link component are also supported.

Href Types

The href prop accepts the following formats:

• Internal routes: "/profile", "/settings", { pathname: "/user", params: { id: "123" } }
• External URLs: "https://example.com", "http://example.com"
• Email links: "mailto:user@example.com"
• Phone links: "tel:+1234567890"

Browser Behavior

In-App Browser (Default)

When browser="in-app" (default), external links open in an in-app browser:

• Mobile: Uses expo-web-browser for a seamless in-app experience
• Web: Opens in a new tab

External Browser

When browser="external", external links open in the system browser:

• Mobile: Uses the device's default browser app
• Web: Opens in a new tab

Accessibility

The Link component maintains accessibility features:

• Proper semantic link structure for screen readers
• Keyboard navigation support
• Focus management
• ARIA attributes when using custom children
• Text decoration for visual link indication

Platform Considerations

React Native

• Internal navigation uses Expo Router's navigation system
• External links use either expo-web-browser or Linking API
• Haptic feedback can be added through custom styling

Web

• Internal navigation uses client-side routing
• External links open in new tabs
• Standard web link behavior and styling apply

Best Practices

1. Use descriptive link text that clearly indicates the destination
2. Choose appropriate browser behavior based on user context
3. Test on both platforms to ensure consistent behavior
4. Consider loading states for external links that might take time to open
5. Use custom children sparingly - text links are more accessible