Typography@knitui/components
Anchor
Anchor is link text built on Text. It renders an <a> (role="link"), inherits the full Text surface (size, truncate, lineClamp, inline, inherit) and adds underline, which controls WHEN the underline shows. The default link color is the theme accent ramp ($color11); recolor via the theme prop, never a color prop.
import { Anchor } from "@knitui/components";Playground
Loading playground…
<Anchor
href="https://example.com"
underline="hover"
>
Anchor link
</Anchor>Examples
Default
Default link text.
Loading example…
Underline
Each underline value, hover to see the difference.
Loading example…
Sizes
The full seven-step text size scale.
Loading example…
Without Href
A link with no href still carries the link role.
Loading example…
Truncated
truncate clamps overflowing link text to a single line with an ellipsis.
Loading example…
Themed
The accent ramp follows the active theme — same link, different accent.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | Specifies the disabled state of the text view for testing purposes. |
href | string | undefined | https://example.com | Destination URL. Forwarded to the underlying `<a>` element on web. |
size system | string | number | undefinedxxs · xs · sm · md · lg · xl · xxl | — | Text size from the token scale. |
theme system | ThemeName | null | undefinedunset · blue · red · green · pink | — | Active theme accent — recolors the link via the palette ramp. |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiTextElement> | undefined |
Plus 508 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.