61: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"] 62:T2258,import { useEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; // One shared base, then one string per variant and per size. // The same strings work as plain HTML on a button element. const base = "relative inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg font-semibold tracking-[-0.01em] " + "transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out active:translate-y-px active:scale-[0.98] " + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white " + "disabled:pointer-events-none disabled:opacity-45 aria-busy:cursor-progress motion-reduce:transition-none motion-reduce:active:translate-y-0 motion-reduce:active:scale-100"; const variants = { primary: "bg-blue-600 text-white shadow-[0_1px_0_0_rgba(255,255,255,0.22)_inset,0_1px_2px_rgba(15,23,42,0.25)] hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-600", secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 active:bg-slate-300 focus-visible:ring-slate-500", outline: "border border-slate-300 bg-white text-slate-900 shadow-[0_1px_2px_rgba(15,23,42,0.06)] hover:border-slate-400 hover:bg-slate-50 active:bg-slate-100 focus-visible:ring-slate-500", ghost: "text-slate-700 hover:bg-slate-100 hover:text-slate-900 active:bg-slate-200 focus-visible:ring-slate-500", destructive: "bg-red-600 text-white shadow-[0_1px_0_0_rgba(255,255,255,0.2)_inset,0_1px_2px_rgba(127,29,29,0.3)] hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-600", dark: "bg-slate-900 text-white hover:bg-slate-800 active:bg-black focus-visible:ring-slate-900", } as const; const sizes = { sm: "min-h-[36px] px-3 text-[13px]", md: "min-h-[42px] px-4 text-sm", lg: "min-h-[50px] px-6 text-base", icon: "h-[42px] w-[42px] p-0 [&_svg]:h-[18px] [&_svg]:w-[18px]", } as const; type Variant = keyof typeof variants; type Size = keyof typeof sizes; const btn = (variant: Variant = "primary", size: Size = "md") => `${base} ${variants[variant]} ${sizes[size]}`; const icon = "h-4 w-4 shrink-0"; const Plus = () => ( ); const Arrow = () => ( ); const Download = () => ( ); const Trash = () => ( ); const Pencil = () => ( ); const Dots = () => ( ); const Spinner = () => ( ); // Frozen copies of each interaction state, so the page shows them without a mouse. const forced: { variant: Variant; label: string; note: string; cls: string }[] = [ { variant: "primary", label: "Publish", note: "Rest", cls: "" }, { variant: "primary", label: "Publish", note: "Hover", cls: "!bg-blue-700" }, { variant: "primary", label: "Publish", note: "Pressed", cls: "!bg-blue-800 translate-y-px scale-[0.98]" }, { variant: "primary", label: "Publish", note: "Keyboard focus", cls: "ring-2 ring-blue-600 ring-offset-2" }, { variant: "ghost", label: "Archive", note: "Ghost hover", cls: "!bg-slate-100 !text-slate-900" }, ]; function Row({ label, children }: { label: string; children: ReactNode }) { return (

{label}

{children}

); } // A real loading button: click it and it holds a busy state, then confirms. function SaveButton() { const [state, setState] = useState<"idle" | "loading" | "done">("idle"); const timer = useRef(); useEffect(() => () => window.clearTimeout(timer.current), []); const run = () => { if (state !== "idle") return; setState("loading"); timer.current = window.setTimeout(() => { setState("done"); timer.current = window.setTimeout(() => setState("idle"), 1600); }, 1800); }; return ( ); } export default function HtmlCssButtonSet() { return (

{forced.map((f) => ( {f.note} ))}

Tab through to see focus rings. Press any button to feel it give.

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L61",null,{"files":[{"path":"components/we-inc/html-css-button-set-with-primary-secondary-outline-ghost-icon-loading-and-destructive-styles.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]