Link API
API reference for the Link component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.
Demos
For usage examples, visit the component demo page: Link
Import
import { Link } from '@soroush.tech/design-system/Link'Link-specific props
underline
Controls text-decoration.
| Value | Behaviour |
|---|---|
"always" | text-decoration: underline (default) |
"hover" | No underline at rest; underline appears on hover |
"none" | text-decoration: none |
color
Resolves against theme.text. Default: "primary".
| Token | Dark source | Light source |
|---|---|---|
"inherit" | CSS keyword | CSS keyword |
"initial" | kineticSurface[100] | kineticSurface[900] |
"primary" | kineticGreen[500] | kineticSurface[900] |
"secondary" | kineticSurface[400] | kineticGreen[800] |
"disabled" | kineticSurface[500] | kineticSurface[900] + 30% opacity |
"error" | neonRed[700] | neonRed[700] |
"success" | kineticGreen[700] | kineticGreen[700] |
"info" | cyberCyan[500] | cyberCyan[800] |
"warning" | solarAmber[800] | solarAmber[800] |
variant
Typographic scale - same values as Typography. Default: "inherit" (link takes the size and weight of its surrounding text).
| Variant | fontSize | fontWeight |
|---|---|---|
"inherit" | inherit | inherit |
"body1" | 2 (16px) | normal |
"body2" | 1 (14px) | normal |
"caption" | 0 (12px) | normal |
"h1"-"h6" | 6-1 (48-14px) | bold / semiBold |
| ... | see Typography README |
Anchor attributes
All standard anchor attributes pass through: href, target, rel, download, hrefLang, ping, referrerPolicy.
target / rel - security
When target="_blank" is set and rel is not provided, rel="noopener noreferrer" is injected automatically. An explicit rel prop is never overridden.
Inherited from Typography
Link extends Omit<TypographyProps, 'as'>. All Typography props are valid - see the Typography README for the full list:
- Spacing -
m,p,mt,mb,mx,my, ... - Layout -
width,maxWidth,display, ... - Typography scales -
fontFamily,fontSize,fontWeight,lineHeight,letterSpacing - Color -
bg,opacity - Flexbox, Border, Position
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.