Inline Link Button React component
A text button that looks like a link, for secondary actions: Forgot password?, View all, Undo, Remove, Read the docs. Neutral, muted, accent or danger, an underline that's always on, on hover or off, an arrow that nudges, and a ↗ for external links. Renders a link when you pass href, a button when you don't.
When to use the Inline Link Button component
Use Inline Link Button for secondary actions that shouldn't compete with the main button: forgot password, view all, undo, learn more, and links inside sentences.
For animated underline styles on navigation links, use Animated Underline Link; for main actions, use Button.
Installation
Add the Inline Link Button component to your project with the shadcn CLI. It lands in components/inline-link-button.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/inline-link-buttonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<InlineLinkButton /> accepts 12 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| href Renders a link when set, a button when not. | string | — |
| external For links: open in a new tab and show a ↗. | boolean | false |
| type For buttons. | "button" | "submit" | "reset" | "button" |
| tone | "neutral" | "muted" | "accent" | "danger" | "neutral" |
| size | "xs" | "sm" | "md" | "lg" | "md" |
| underline always: underlined at rest. hover: underline appears on hover. none: never. | "always" | "hover" | "none" | "hover" |
| icon Icon before the text. | React.ReactNode | — |
| arrow A trailing arrow that nudges forward on hover. | boolean | false |
| accentColor Accent colour for tone="accent". | string | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
| children* | React.ReactNode | — |
- href
Renders a link when set, a button when not.
string - external
For links: open in a new tab and show a ↗.
booleanDefault: false - type
For buttons.
"button" | "submit" | "reset"Default: "button" - tone"neutral" | "muted" | "accent" | "danger"Default: "neutral"
- size"xs" | "sm" | "md" | "lg"Default: "md"
- underline
always: underlined at rest. hover: underline appears on hover. none: never.
"always" | "hover" | "none"Default: "hover" - icon
Icon before the text.
React.ReactNode - arrow
A trailing arrow that nudges forward on hover.
booleanDefault: false - accentColor
Accent colour for tone="accent".
string - theme"dark" | "light"Default: "dark"
- classNamestring
- children*React.ReactNode
FAQ
- Link or button?
- Pass href and it renders an <a>; leave it out and it's a <button type="button">. Screen readers get the right role either way.
- How are external links marked?
- external opens a new tab safely, adds a ↗ that nudges on hover and a hidden '(opens in a new tab)' for screen readers.
- Can it sit inside a paragraph?
- Yes, it's inline and aligned to the text baseline, so it reads like a normal link in a sentence.
