Link Preview
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { LinkPreview } from "@corew500/ui/link-preview"
<LinkPreview>Content</LinkPreview>Variants
linkPreviewVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultsubtle | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href* | string | — | Link destination |
| preview | LinkPreviewData | — | Preview data (image, title, description) |
| side | enum | top | Side of the link to show preview |
| align | enum | center | Alignment relative to the link |
| openDelay | number | 300 | Delay before showing preview (ms) |
| closeDelay | number | 150 | Delay before hiding preview (ms) |
| showOnTouch | enum | false | Whether to show preview on touch devices |
| variant | enum | default | — |
Accessibility
Keyboard Navigation
- Keyboard accessible (hover preview shows on focus)
Screen Readers
- Preview popup is properly labeled via aria-describedby
Additional
- - Uses semantic anchor element for proper link behavior
- Respects user motion preferences
Localization
Translatable Content
- - Link text and preview content should be pre-translated
- Preview title and description accept localized strings