ui-lib

component — actions

Link Button

A semantic anchor built on react-aria-components, styled like a Button via shared quebi button styles. Inherits the full intent and size scale.

  • action
  • link
  • navigation
  • interactive
  • cta

04 examples

Intents

Looks like a Button, navigates like a link. Five intents share the Button's quebi styling.

get startedpreviewdocslearn moreleave

Disabled

disableddisabled

source

link-button.tsx

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

"use client"

import {
  composeRenderProps,
  Link as LinkPrimitive,
  type LinkProps as LinkPrimitiveProps,
} from "react-aria-components"
import type { VariantProps } from "tailwind-variants"
import { buttonStyles } from "@/components/button"

/**
 * LinkButton — quebi design system
 *
 * A semantic anchor (react-aria Link) styled exactly like a Button. Use it for
 * navigation that should look like a button — it inherits the full intent/size/
 * isCircle variant API from `buttonStyles`, so the intents, sizes and focus
 * ring carry over.
 */
interface LinkButtonProps extends LinkPrimitiveProps, VariantProps<typeof buttonStyles> {
  ref?: React.Ref<HTMLAnchorElement>
}

const LinkButton = ({ className, intent, size, isCircle, ref, ...props }: LinkButtonProps) => {
  return (
    <LinkPrimitive
      ref={ref}
      {...props}
      className={composeRenderProps(className, (className, renderProps) =>
        buttonStyles({
          ...renderProps,
          intent,
          size,
          isCircle,
          className,
        }),
      )}
    >
      {(values) => (
        <>{typeof props.children === "function" ? props.children(values) : props.children}</>
      )}
    </LinkPrimitive>
  )
}

export type { LinkButtonProps }
export { LinkButton }