LinkButton
Navigation that looks like a button, rendered as a real anchor with six intents, three appearances, and three sizes.
Contract
| Axis | Values | Default | Use |
|---|---|---|---|
intent | neutral, primary, info, success, warning, danger | neutral | Communicates the purpose or outcome of the destination. |
appearance | solid, outline, ghost | solid | Changes visual emphasis without changing intent. |
uiSize | md, lg | md | Matches the size of surrounding controls. |
disabled | boolean | false | Removes the destination and blocks navigation. |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/link-button.css';Scroll inside the code area to read long lines.
Imports
import { TRLinkButton } from '@tinyrack/ui/components/link-button';Scroll inside the code area to read long lines.
Playground
Usage
Button-styled navigation permalink
Use TRLinkButton when navigation should look like a button. It renders a real anchor with role=link, so it keeps native link behavior.
Examples
Solid intents permalink
Use solid link buttons for destinations that need the strongest emphasis.
Outline intents permalink
Use outline link buttons for destinations that should remain visible with less emphasis.
Ghost intents permalink
Use ghost link buttons for low-emphasis navigation on uncluttered surfaces.
Sizes permalink
Choose a size that matches nearby controls, not the importance of the destination.
States and destinations permalink
Disabled removes the destination and blocks navigation. External destinations disclose a new browsing context in visible text.
API
Use TRLinkButton for navigation that looks like a button, and TRButton for commands. It renders a real anchor with role="link", so Enter activates it, Space scrolls like a native anchor, and native href, target, rel, and download all work. Disabled link buttons expose aria-disabled, remove their href and tab stop, and suppress pointer and keyboard activation. External destinations should disclose a new browsing context in visible text and pair target="_blank" with an appropriate rel.
| Prop | Type / default | Purpose |
|---|---|---|
intent | neutral | primary | info | success | warning | danger / neutral | Selects the semantic meaning and color role. |
appearance | solid | outline | ghost / solid | Selects visual emphasis without changing the intent. |
uiSize | md | lg / md | Selects the control size. |
disabled | boolean / false | Removes the destination and blocks navigation. |
href | native anchor href | Sets the destination; omitted while disabled. |
render | Base UI render element or callback | Composes React Router or another link component without nested anchors. |
| native props | anchor attributes, events, className, style, ref | Forwards external and download attributes, handlers, styles, and the React 19 ref. |
TRLinkButton reuses the TRButton styling contract (the tr-btn class with
data-appearance, data-intent, and data-ui-size), so it stays visually
identical to a button while keeping link semantics.