Design System

Button Icon Link

Transparent

The default variant. No background at rest; a circular surface appears on hover and press.

<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

Displays a permanent neutralLight circular background behind the icon, visible at rest rather than only on interaction.

<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

No background in any state. On click, the icon scales down slightly to indicate a press.

<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>

External links

target and rel are not set automatically. Pass them explicitly, including any rel values such as noopener or noreferrer, since that security decision belongs to the caller.

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