# LinkIconButton

> An icon-only link styled as a button. Deprecated. Use IconButton with href instead.

Status: deprecated. Added in Components 2.0.0.

> **Deprecated.** Use [`<IconButton href={…}>`](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md) and wire
> [`RoadieLinkProvider`](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md) 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](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md).

## Import

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

## Examples

### Default

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

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

### Emphasis

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

### Sizes

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

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

### Intents

```tsx
{/* 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>
<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>
{/* Normal */}
<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>
```

### With custom component (legacy)

> **Recommended:** wire [`RoadieLinkProvider`](https://ticketsolutionsptyltd.github.io/roadie/foundations/linking.md) at the app root and use [`<IconButton href={…}>`](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md). 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.

```tsx
import Link from 'next/link'

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

## Guidelines

- Use [`<IconButton href={…}>`](https://ticketsolutionsptyltd.github.io/roadie/components/icon-button.md) 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={…}>`](https://ticketsolutionsptyltd.github.io/roadie/components/button.md) 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.

## API reference

### LinkIconButton

An icon-only link styled as a button.

```tsx
import { LinkIconButton } from '@oztix/roadie-components/link-button'
```

- `as`: `ElementType`.
- `aria-label`: `string`. Required.
- `intent`: `"neutral" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info"`. Defaults to `'neutral'`.
- `emphasis`: `"strong" | "normal" | "subtle" | "subtler"`. Defaults to `'normal'`.
- `size`: `"xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg"`. Defaults to `md`. Icon-button sizing. Use `'xs' | 'sm' | 'md' | 'lg'` (plain) — the `'icon-*'` aliases are accepted for backwards compatibility but discouraged.
- `className`: `string`.

Docs updated 10 Oct 2026.