{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"html-css-button-solid-outline-ghost-with-hover-active-disabled-states","type":"registry:component","title":"HTML CSS Button Solid Outline Ghost With Hover Active Disabled States","description":"Free HTML CSS buttons in solid, outline and ghost styles, each with hover, pressed, keyboard focus and disabled states, in commented CSS and React.","dependencies":[],"files":[{"path":"components/we-inc/html-css-button-solid-outline-ghost-with-hover-active-disabled-states.tsx","type":"registry:component","content":"// Three button styles (solid, outline, ghost) with real hover, pressed, focus and disabled states.\nconst styles = [\n  {\n    name: \"Solid\",\n    note: \"The one main action on a screen.\",\n    cls: \"bg-teal-700 text-white shadow-sm hover:bg-teal-800 active:bg-teal-900 disabled:bg-slate-200 disabled:text-slate-500 disabled:shadow-none\",\n  },\n  {\n    name: \"Outline\",\n    note: \"A second choice next to the main one.\",\n    cls: \"border border-teal-700 bg-white text-teal-800 hover:bg-teal-50 active:bg-teal-100 disabled:border-slate-300 disabled:bg-white disabled:text-slate-500\",\n  },\n  {\n    name: \"Ghost\",\n    note: \"Quiet actions in toolbars and dialogs.\",\n    cls: \"bg-transparent text-teal-800 hover:bg-teal-50 active:bg-teal-100 disabled:bg-transparent disabled:text-slate-500\",\n  },\n];\n\nconst base =\n  \"inline-flex min-h-[44px] items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-[background-color,transform] duration-150 active:translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:translate-y-0 motion-reduce:transition-none motion-reduce:active:translate-y-0\";\n\nexport default function HtmlCssButtonSolidOutlineGhostWithHoverActiveDisabledStates() {\n  return (\n    <section className=\"bg-stone-50 px-5 py-14\">\n      <div className=\"mx-auto max-w-3xl rounded-2xl border border-stone-200 bg-white p-6 sm:p-8\">\n        <h2 className=\"text-lg font-semibold text-slate-900\">Booking actions</h2>\n        <p className=\"mt-1 text-sm text-slate-600\">Hover, press or tab to each button. The right column shows the disabled state.</p>\n        <ul className=\"mt-6 divide-y divide-stone-200\">\n          {styles.map((s) => (\n            <li key={s.name} className=\"grid gap-3 py-5 sm:grid-cols-[150px_1fr] sm:items-center\">\n              <div>\n                <p className=\"text-sm font-semibold text-slate-900\">{s.name}</p>\n                <p className=\"text-xs text-slate-600\">{s.note}</p>\n              </div>\n              <div className=\"flex flex-wrap gap-3\">\n                <button type=\"button\" className={`${base} ${s.cls}`}>Confirm booking</button>\n                <button type=\"button\" className={`${base} ${s.cls}`}>\n                  <svg viewBox=\"0 0 20 20\" width=\"16\" height=\"16\" aria-hidden=\"true\" className=\"fill-current\">\n                    <path d=\"M6 2h2v2h4V2h2v2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2zm10 7H4v7h12V9z\" />\n                  </svg>\n                  Reschedule\n                </button>\n                <button type=\"button\" disabled className={`${base} ${s.cls}`}>Unavailable</button>\n              </div>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  );\n}\n"}]}