Components / Link
Link
Styled anchor with underline-from-center hover animation, external icon, 4 variants (default/accent/muted/underline) and 3 sizes.
actions v0.5.0
Playground
Examples
Variants
<cg-stack direction="row" gap="md"><cg-link href="#" variant="default">Default</cg-link><cg-link href="#" variant="accent">Accent</cg-link><cg-link href="#" variant="muted">Muted</cg-link><cg-link href="#" variant="underline">Underline</cg-link><cg-link href="#" external>External</cg-link></cg-stack>Sizes
<cg-stack direction="row" gap="md" align="center"><cg-link href="#" size="sm">Small</cg-link><cg-link href="#" size="md">Medium</cg-link><cg-link href="#" size="lg">Large</cg-link></cg-stack>Import
import { CgLink } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-link';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link URL |
variant | "default" | "accent" | "muted" | "underline" | "default" | Style variant |
size | "sm" | "md" | "lg" | "md" | Font size |
external | boolean | false | Opens in new tab + adds external icon |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-link-click | none | Anchor clicked (suppressed when disabled) |