61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T1e62,"use client"; import * as React from "react"; import { useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type InlineLinkTone = "neutral" | "muted" | "accent" | "danger"; export type InlineLinkSize = "xs" | "sm" | "md" | "lg"; export interface InlineLinkButtonProps extends Omit & React.ButtonHTMLAttributes, "children" | "className" | "href" | "type"> { /** Renders a link when set, a button when not. */ href?: string; /** For links: open in a new tab and show a ↗. */ external?: boolean; /** For buttons. */ type?: "button" | "submit" | "reset"; tone?: InlineLinkTone; size?: InlineLinkSize; /** always: underlined at rest. hover: underline appears on hover. none: never. */ underline?: "always" | "hover" | "none"; /** Icon before the text. */ icon?: React.ReactNode; /** A trailing arrow that nudges forward on hover. */ arrow?: boolean; /** Accent colour for tone="accent". */ accentColor?: string; theme?: "dark" | "light"; className?: string; children: React.ReactNode; } const PALETTES = { dark: { neutral: "#F5F4F1", muted: "rgba(245,244,241,0.62)", accent: "#7CB8FF", danger: "#FF7A6B", focus: "rgba(245,244,241,0.85)" }, light: { neutral: "#0A0A0A", muted: "rgba(10,10,10,0.6)", accent: "#2563EB", danger: "#E5484D", focus: "rgba(10,10,10,0.85)" }, }; const SIZES: Record = { xs: { font: 12, icon: 12, gap: 4 }, sm: { font: 13, icon: 13, gap: 5 }, md: { font: 14.5, icon: 15, gap: 6 }, lg: { font: 16, icon: 16, gap: 7 }, }; export function InlineLinkButton({ href, external = false, type = "button", tone = "neutral", size = "md", underline = "hover", icon, arrow = false, accentColor, theme = "dark", className, children, ...rest }: InlineLinkButtonProps) { const p = PALETTES[theme]; const s = SIZES[size]; const reduce = Boolean(useReducedMotion()); const color = tone === "accent" ? (accentColor ?? p.accent) : p[tone]; const isLink = typeof href === "string"; const classes = cn( "group/ilb inline-flex cursor-pointer items-center rounded-[4px] align-baseline font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-45", "text-[var(--ilb-color)] decoration-[var(--ilb-deco)] underline-offset-[3px] transition-[color,text-decoration-color,opacity] duration-150", underline === "always" && "underline hover:decoration-[var(--ilb-color)]", underline === "hover" && "hover:underline focus-visible:underline", tone === "muted" && "hover:text-[var(--ilb-hover)]", className, ); const style = { gap: s.gap, fontSize: s.font, lineHeight: 1.4, // Colour goes through a variable so the muted tone's hover class can override it. ["--ilb-color" as string]: color, ["--ilb-deco" as string]: `color-mix(in srgb, ${color} 40%, transparent)`, ["--ilb-hover" as string]: p.neutral, ["--tw-ring-color" as string]: p.focus, ["--tw-ring-offset-color" as string]: "transparent", } as React.CSSProperties; const content = ( <> {icon && ( {icon} )} {children} {arrow && !(isLink && external) && ( )} {isLink && external && ( )} ); if (isLink) { return ( )}> {content} {external && (opens in a new tab)} ); } return ( ); } const undoIcon = ( ); export function InlineLinkButtonDemo({ theme = "dark" }: { theme?: "dark" | "light" }) { const [removed, setRemoved] = React.useState(false); const panel = theme === "dark" ? { bg: "#0E0E0E", border: "rgba(255,255,255,0.1)", text: "rgba(245,244,241,0.75)", faint: "rgba(245,244,241,0.45)" } : { bg: "#FFFFFF", border: "rgba(10,10,10,0.1)", text: "rgba(10,10,10,0.72)", faint: "rgba(10,10,10,0.45)" }; return (

By signing up you agree to our{" "} Terms {" "} and{" "} Privacy Policy .

Forgot password? Read the docs

{removed ? "Invoice #2041 removed." : "Invoice #2041 is overdue."} {removed ? ( setRemoved(false)}> Undo ) : ( setRemoved(true)}> Remove )}

Recent projects View all

); } export default InlineLinkButton; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/inline-link-button/inline-link-button.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]