LinkButton

Deprecated. Use <Button 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.

A link styled as a button for navigation actions. Shares all visual styles with Button.

Import

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

Examples

Default

<LinkButton href='#'>Link button</LinkButton>

Emphasis

<div className='flex flex-row flex-wrap gap-2'>
  <LinkButton href='#' emphasis='strong'>Strong</LinkButton>
  <LinkButton href='#' emphasis='normal'>Normal</LinkButton>
  <LinkButton href='#' emphasis='subtle'>Subtle</LinkButton>
  <LinkButton href='#' emphasis='subtler'>Subtler</LinkButton>
</div>
View code

Sizes

<div className='flex flex-row flex-wrap items-center gap-2'>
  <LinkButton href='#' size='xs'>Extra small</LinkButton>
  <LinkButton href='#' size='sm'>Small</LinkButton>
  <LinkButton href='#' size='md'>Medium</LinkButton>
  <LinkButton href='#' size='lg'>Large</LinkButton>
</div>
View code

Intents

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

With custom component (legacy)

Recommended: wire RoadieLinkProvider at the app root and use <Button 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'

<LinkButton as={Link} href='/about'>About</LinkButton>

Guidelines

• Use <Button href={…}> for new navigation links — LinkButton is deprecated.
• Use Button for actions that don't navigate (form submissions, toggles, dialogs).
• For icon-only links, use <IconButton href={…}>.

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.