SmartLink – Once UI

SmartLink provides flexible and consistent inline navigation with built-in icon support and style overrides.

Basic usage

<SmartLink href="#" prefixIcon="link" suffixIcon="arrowRight">
Learn more
</SmartLink>

Fill width

Use fillWidth to stretch the link across the container. It's useful when you're using fluid children elements.

Fill width

Full width link

<SmartLink href="#" fillWidth unstyled>
  <Row fillWidth background="surface" border="surface" radius="l" padding="16" horizontal="between" vertical="center">
    <Text>Full width link</Text>
    <Icon name="chevronRight" />
  </Row>
</SmartLink>

Unstyled

Disable default padding and visual treatments using unstyled.

Unstyled

Raw link

<SmartLink href="#" unstyled>
  Raw link
</SmartLink>

Selected

Apply underline when selected is true.

Selected

Active link

<SmartLink href="#" selected>
  Active link
</SmartLink>

API reference

Prop	Type	Default
prefixIcon Icon before the text.	IconName	—
suffixIcon Icon after the text — an arrow for an outbound link, say.	IconName	—
fillWidth Fill the parent's width rather than hugging the text.	boolean	false
iconSize Size of either icon.	xllmsxs	xs
selected Mark as the current page, for navigation.	boolean	—
unstyled Drop the link styling, when the child carries its own.	boolean	false
children	React.ReactNode	—
href Where it goes. Internal paths route through the framework adapter; external ones do not.	string	—
style	React.CSSProperties	—
className	string	—
…and every React.AnchorHTMLAttributes prop	inherited	—