LinkIconButton

Deprecated. Use <IconButton href={…}> and wire RoadieLinkProvider at the app root for client-side routing instead. LinkButton and LinkIconButton remain exported and continue to work for back-compat, but will be removed in v3.0.0.

An icon-only link styled as a button. Shares all visual styles with IconButton.

Import

import { LinkIconButton } from '@oztix/roadie-components'

Examples

Default

Always provide an aria-label since there is no visible text.

<LinkIconButton href='#' aria-label='Settings'>
  <Gear weight='bold' />
</LinkIconButton>

Emphasis

<div className='flex flex-row flex-wrap gap-2'>
  <LinkIconButton href='#' aria-label='Strong' emphasis='strong'>
    <Star weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Normal' emphasis='normal'>
    <Star weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Subtle' emphasis='subtle'>
    <Star weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Subtler' emphasis='subtler'>
    <Star weight='bold' />
  </LinkIconButton>
</div>
View code

Sizes

The default size is icon-md. All sizes maintain square proportions.

<div className='flex flex-row flex-wrap items-center gap-2'>
  <LinkIconButton href='#' aria-label='Extra small' size='icon-xs'>
    <Heart weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Small' size='icon-sm'>
    <Heart weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Medium' size='icon-md'>
    <Heart weight='bold' />
  </LinkIconButton>
  <LinkIconButton href='#' aria-label='Large' size='icon-lg'>
    <Heart weight='bold' />
  </LinkIconButton>
</div>
View code

Intents

<div className='grid gap-2'>
  <div className='flex flex-row flex-wrap gap-2'>
    <LinkIconButton href='#' aria-label='Neutral' emphasis='strong' intent='neutral'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Accent' emphasis='strong' intent='accent'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Brand' emphasis='strong' intent='brand'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Info' emphasis='strong' intent='info'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Success' emphasis='strong' intent='success'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Warning' emphasis='strong' intent='warning'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Danger' emphasis='strong' intent='danger'><CheckCircle weight='bold' /></LinkIconButton>
  </div>
  <div className='flex flex-row flex-wrap gap-2'>
    <LinkIconButton href='#' aria-label='Neutral' emphasis='normal' intent='neutral'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Accent' emphasis='normal' intent='accent'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Brand' emphasis='normal' intent='brand'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Info' emphasis='normal' intent='info'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Success' emphasis='normal' intent='success'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Warning' emphasis='normal' intent='warning'><CheckCircle weight='bold' /></LinkIconButton>
    <LinkIconButton href='#' aria-label='Danger' emphasis='normal' intent='danger'><CheckCircle weight='bold' /></LinkIconButton>
  </div>
</div>
View code

With custom component (legacy)

Recommended: wire RoadieLinkProvider at the app root and use <IconButton href={…}> — it routes through your configured Link automatically. The as prop below is preserved for back-compat only and will be removed in v3.0.0.

import Link from 'next/link'

<LinkIconButton as={Link} href='/settings' aria-label='Settings'>
  <GearIcon weight='bold' />
</LinkIconButton>

Guidelines

• Use <IconButton href={…}> for new navigation links — LinkIconButton is deprecated.
• Always provide an aria-label to describe the action since there is no visible text.
• For links with visible text, use <Button href={…}> instead.

Accessibility

• Keyboard: Enter activates the link. Focus is indicated by a semi-transparent ring via is-interactive.
• ARIA: Renders as a native <a> element by default. Screen readers announce it as a link, not a button.
• Requires an aria-label prop (enforced by TypeScript) since there is no visible text.