Inline Link
Preview
index.tsxNone Underline
Hover to Underline
Always Underline
Inline Link Size
Preview
index.tsxSmall
Medium
Large
Inline Link Icon
Preview
index.tsxDesign Tokens for InlineLink
| Token | Color for | State/Meaning |
|---|---|---|
| --color-text-link-standard-enabled | Standard link | Enabled |
| --color-text-link-standard-hovered | Standard link | Hovered |
| --color-text-link-standard-focused | Standard link | Focused |
| --color-text-link-standard-disabled | Standard link | Disabled |
| --color-text-link-neutral-enabled | Neutral link | Enabled |
| --color-text-link-neutral-hovered | Neutral link | Hovered |
| --color-text-link-neutral-focused | Neutral link | Focused |
| --color-text-link-neutral-disabled | Neutral link | Disabled |
InlineLink may also inherit some tokens from Button or Text components for typography and spacing. See their documentation for more details.
InlineLink API Reference
<InlineLink />
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | Link URL | |
| target | string | Target attribute (_blank, _self, etc.) | |
| size | 'sm' | 'md' | 'lg' | 'md' | Link size |
| color | 'neutral' | 'standard' | 'standard' | Link color |
| disabled | boolean | false | Disable the link |
| underline | 'always' | 'hover' | 'none' | 'hover' | Underline behavior |
| iconOnly | boolean | false | Icon only, no text |
| asChild | boolean | false | Render as child element |
| ...aProps | HTMLAnchorElement props | All native anchor props (className, style, ...) |
Note: InlineLink inherits all native props from HTMLAnchorElement.