Link Button - HapplyUI

A text-style button component with underline decoration, multiple variants, and polymorphic icon support.

Installation

bunx @happlyui/cli@latest add link-button

Dependencies

npm packages

@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as LinkButton from "@/components/ui/link-button"

<LinkButton.Root variant="gray">
  Link Button
</LinkButton.Root>

Examples

Variants

Available variants: gray (default), black, primary, error, and modifiable (no default styling, fully customizable via className).

<LinkButton.Root variant="gray">Gray</LinkButton.Root>
<LinkButton.Root variant="black">Black</LinkButton.Root>
<LinkButton.Root variant="primary">Primary</LinkButton.Root>
<LinkButton.Root variant="error">Error</LinkButton.Root>
<LinkButton.Root variant="modifiable" className="text-success-base">Modifiable</LinkButton.Root>

Sizes

Link buttons come in medium (default) and small sizes.

<LinkButton.Root>Medium (default)</LinkButton.Root>
<LinkButton.Root size="small">Small</LinkButton.Root>

Underline

Use the underline prop to show permanent underline decoration.

<LinkButton.Root underline variant="gray">Link Button</LinkButton.Root>
<LinkButton.Root underline variant="primary">Link Button</LinkButton.Root>

With Icon

Use LinkButton.Icon with the `as` prop for polymorphic icon rendering.

<LinkButton.Root>
  <LinkButton.Icon as={RiArrowLeftSLine} />
  Link Button
  <LinkButton.Icon as={RiArrowRightSLine} />
</LinkButton.Root>

Disabled

Disabled state across all variants.

<LinkButton.Root variant="gray" disabled>Link Button</LinkButton.Root>
<LinkButton.Root variant="primary" disabled>Link Button</LinkButton.Root>

As Child

Use the asChild prop with Radix Slot to render as a different element, such as a link.

Link Button

<LinkButton.Root asChild>
  <a href="#">Link Button</a>
</LinkButton.Root>

API Reference

LinkButton.Root

The main link button component.

Prop	Type	Default	Description
`variant`	`'gray' \| 'black' \| 'primary' \| 'error' \| 'modifiable'`	`'gray'`	The visual style
`size`	`'medium' \| 'small'`	`'medium'`	The size of the link button
`underline`	`boolean`	`false`	Shows permanent underline decoration
`asChild`	`boolean`	`false`	Renders as child element using Radix Slot
`disabled`	`boolean`	`false`	Disables the link button

LinkButton.Icon

Polymorphic icon container that receives variant and size from LinkButton.Root.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render as