Usage
import { Link } from '@loomhq/lens'
<Link>Content</Link>
Variants
Use subtle when you do not want an underline and as long as the surrounding context makes it clear that the link is interactive. Links by default should have an underline as it's a common affordance for link accessibility.
Href
HTML tag
Change the HTML wrapper tag with htmlTag prop.
Disabled
Wrapping
Use noWrap to prevent the link from wrapping and truncating. This does not work if hasEllipsis is enabled for a parent Text component.
Examples
Link in a paragraph
Ellipsis
Size
Props
name
type
default
variant
'neutral' | 'primary' | 'subtle'
'primary'
htmlTag
'button' | 'a'
'a'
children
React.ReactNode
href
string
isDisabled
boolean
noWrap
boolean
onClick
React.MouseEventHandler<HTMLAnchorElement>
target
string