Link Button
A lightweight, versatile component designed for text links with button-like behavior. Built on Radix UI's Slot primitive, it supports various styles, sizes, and states with minimal visual footprint.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your LinkButton component
Copy this code to create your LinkButton component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Colors
LinkButton offers four semantic color options to convey different types of actions. Use primary for main actions, neutral for secondary actions, danger for destructive operations, and success for confirmation actions.
Underline
Add permanent underlines to link buttons for increased visibility and to match traditional hyperlink styling expectations. By default, underlines only appear on hover and focus states, but using the underline prop makes them permanently visible.
Sizes
LinkButton provides size options to fit various UI contexts. Choose medium (default) for standard text links and small for more compact interfaces or when space is limited.
With Icons
Enhance your link buttons with icons for improved visual communication. The LinkButton.Icon component can be placed before or after text, or on both sides. Icons automatically adjust to match the link button's size, maintaining visual consistency.
API Reference
The LinkButton component is built on top of the Radix UI Slot primitive and provides a way to create text links with button-like behavior. See the Radix UI Slot documentation for more details on the base component.
LinkButton.Root
Main link button component with support for various colors and sizes.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
color | "primary""neutral""danger""success" | "primary" | Color theme of the link button |
size | "small""medium" | "medium" | Size of the link button |
underline | "boolean" | "false" | Whether to show a permanent underline |
disabled | "boolean" | "false" | Whether the link button is disabled |
asChild | "boolean" | "false" | Whether to merge props onto child component |
LinkButton.Icon
Adds an icon to the link button with proper positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | Icon component to render |
position | "left""right" | "left" | Position of the icon relative to text |