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

<LinkIconButton href='#' aria-label='Strong' emphasis='strong'>
  <Star weight='bold' />
</LinkIconButton>
<LinkIconButton href='#' aria-label='Normal' emphasis='normal'>
  <Star weight='bold' />
</LinkIconButton>

Sizes

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

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

Intents

{/* Strong */}
<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>

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.