Overview
The Anchor component provides a consistently styled hyperlink with customizable underline behavior and hover effects.
Import
import { Anchor } from '@kivora/react';
Basic Usage
<Anchor href="https://example.com">Visit our site</Anchor>
Underline Styles
Control when the underline appears:
<Anchor href="/docs" underline="hover">
Hover to underline (default)
</Anchor>
<Anchor href="/docs" underline="always">
Always underlined
</Anchor>
<Anchor href="/docs" underline="never">
Never underlined
</Anchor>
Underline Options
hover (default) - Underline appears on hoveralways - Underline is always visiblenever - No underline
Examples
External Link
<Anchor href="https://example.com" target="_blank" rel="noopener noreferrer">
External Documentation
</Anchor>
Navigation Link
<Anchor href="/documentation" underline="always">
Read the Docs
</Anchor>
Inline Text Link
<p>
Check out our <Anchor href="/guide">getting started guide</Anchor> to learn more.
</p>
No Underline Link
<Anchor href="/settings" underline="never">
Settings
</Anchor>
With Custom Styling
<Anchor href="/premium" className="text-lg font-bold">
Upgrade to Premium
</Anchor>
Accessibility
The component automatically inherits all standard anchor attributes:
<Anchor
href="/docs"
aria-label="Documentation homepage"
title="View documentation"
>
Docs
</Anchor>
Styling
Default styles include:
- Primary color text (
text-primary)
- Medium font weight (
font-medium)
- Underline offset of 4px when underlined
- Opacity transition on hover (80% opacity)
Props
underline
'always' | 'hover' | 'never'
default:"'hover'"
Controls when the underline is visible
...props
React.ComponentPropsWithoutRef<'a'>
All standard HTML anchor props (target, rel, download, etc.)
Type Definition
Source: /home/daytona/workspace/source/src/components/typography/Anchor.tsx:5
export interface AnchorProps extends React.ComponentPropsWithoutRef<'a'> {
underline?: 'always' | 'hover' | 'never';
}