AppLink
A text link with a choice of hover animation and optional icons — the styled anchor for prose, footers, and call-to-actions.
<app-link href="/pricing" animation="underline" right-icon="arrow-right">Read more</app-link><app-link> is the styled anchor — an inline prose link, a footer link, a “read more” affordance, a marketing call-to-action. It is not a button (<app-button>) and not a nav item inside <app-shell>; reach for it wherever a plain <a> would go but the hover should read as intentional.
Pick a hover treatment with the animation attribute — from an always-on static underline to animated underline, shine, glow and more, plus a plain none — add a left-icon/right-icon, and it renders identically to the React <AppLink> because the look comes entirely from the shared @webority/theme. Every animation is disabled under prefers-reduced-motion.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the link above it. Hover the link to see the animation.
Animations
A dozen hover treatments — animated and static. Hover each to see it; the same animation attribute switches between them, so a product only changes a string.
animation="underline"
animation="underline-center"
animation="static"
animation="slide"
animation="icon"
animation="highlight"
animation="bracket"
animation="fade"
animation="grow"
animation="glow"
animation="shine"
animation="none"
prefers-reduced-motion: reduce every animation stops — the link falls back to a static underline, so the affordance never disappears for people who opt out of motion.Icons
A leading or trailing glyph, given as an icon name. The icon animation reveals a trailing glyph on hover.
Show code
<app-link href="#" left-icon="download">Download the report</app-link> <app-link href="#" right-icon="arrow-right">Next step</app-link> <app-link href="#" animation="icon">Learn more</app-link>
animation="icon" with no icon set reveals a default arrow-right on hover, so the animation is never a no-op. Set your own right-icon to reveal that instead.Sizes
Three sizes scale the text and the icons together.
External & disabled
external opens in a new tab with the safe rel; disabled drops navigation and exposes the state to assistive tech.
Show code
<app-link href="https://webority.dev" external="true" right-icon="external-link">Our site</app-link> <app-link href="/x" disabled="true">Unavailable</app-link>
When to use
Use it when
- An inline prose link inside body copy.
- A footer link or a “read more” / “learn more” affordance.
- A marketing call-to-action link where the hover should feel deliberate.
Reach for something else when
- The control performs an action rather than navigating. → AppButton
- It is a primary navigation item in the app chrome. → AppShell
- It is a rich link card with an icon tile and supporting text. → AppResourceCard
- It is the trail to the current page. → AppBreadcrumbs
Best practices
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| href | string | — | Destination URL. |
| (content) | string | — | The link text (inner content, or the label attribute). |
| animation | underline | underline-center | static | slide | icon | highlight | bracket | fade | grow | glow | shine | none | underline | Hover treatment. static is an always-visible underline; none is a plain link. Motion is disabled under prefers-reduced-motion. |
| left-icon | string | — | AppIcon glyph shown before the label. |
| right-icon | string | — | AppIcon glyph shown after the label. |
| size | md | sm | lg | md | Scales the text and icons. |
| external | bool | false | Open in a new tab (adds target/rel). |
| disabled | bool | false | No navigation; renders as an aria-disabled span. |
| label | string | — | Link text (React children); inner content is used when absent. |