Button Icon Link

Transparent

Transparent is the default variant. No background at rest. The circular surface only appears on hover and active. Use transparent for navigation icon links where the icon should float quietly in the layout until interacted with.

<Inline
space="small"
alignY="center">
<ButtonIconLink
icon="books"
label="Reading list"
href="/reading/"
/>
<ButtonIconLink
icon="rss"
label="RSS feed"
href="/rss.xml"
/>
<ButtonIconLink
icon="envelope"
label="Contact"
href="/inbox/"
/>
</Inline>

Soft

Soft applies a permanent neutralLight background, making the circular surface always visible. Use soft when the link needs to be obviously discoverable at rest, for example in a toolbar or action group alongside soft ButtonIcon controls.

<Inline
space="small"
alignY="center">
<ButtonIconLink
icon="books"
label="Reading list"
href="/reading/"
variant="soft"
/>
<ButtonIconLink
icon="rss"
label="RSS feed"
href="/rss.xml"
variant="soft"
/>
<ButtonIconLink
icon="envelope"
label="Contact"
href="/inbox/"
variant="soft"
/>
</Inline>

Ghost

Ghost has no background and no hover or active circle. Only the press animation fires on click. Use ghost alongside plain text links where a visible surface would feel too heavy.

<Inline
space="small"
alignY="center">
<ButtonIconLink
icon="books"
label="Reading list"
href="/reading/"
variant="ghost"
/>
<ButtonIconLink
icon="rss"
label="RSS feed"
href="/rss.xml"
variant="ghost"
/>
<ButtonIconLink
icon="envelope"
label="Contact"
href="/inbox/"
variant="ghost"
/>
</Inline>

For links that open in a new tab, pass target and rel explicitly. ButtonIconLink does not auto-apply rel. The caller decides the security policy.

<Inline
space="small"
alignY="center">
<ButtonIconLink
icon="rss"
label="RSS feed"
href="/rss.xml"
target="_blank"
rel="noopener noreferrer"
/>
</Inline>