Disabled

Interaction unavailable.

Real disabled attribute — the browser blocks clicks and focus on its own; :disabled supplies the look.

html

<div class="dis-demo">
  <button class="dis-btn" type="button" style="--accent:#241430;border-radius:9px;" disabled>Continue</button>
  <p class="dis-demo__hint">Real <code>disabled</code> attribute — the browser blocks clicks and focus on its own; <code>:disabled</code> supplies the look.</p>
</div>
<style>
.dis-demo { width: 260px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; text-align: center; }
.dis-btn { font: 700 15px system-ui, sans-serif; padding: 11px 22px; border: 2px solid var(--accent); background: var(--accent); color: #FAF7F2; cursor: pointer; }
.dis-btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.3); }
.dis-demo__hint { margin: 12px 0 0; font-size: 11px; color: #241430888; text-align: left; }
.dis-demo__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<div class="w-[260px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl text-center">
  <button type="button" class="font-bold text-[15px] px-[22px] py-[11px] border-2 text-[#FAF7F2] cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:grayscale-[.3]" style="border-color:#241430;background:#241430;border-radius:9px;" disabled>Continue</button>
  <p class="m-0 mt-3 text-[11px] text-[#241430]/55 text-left">Real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">disabled</code> attribute — the browser blocks clicks and focus on its own; <code class="bg-[#24143012] px-1.5 py-0.5 rounded">:disabled</code> supplies the look.</p>
</div>

react

export function DisabledState({
  label = "Continue",
  accent = "#241430",
  force = true,
  radius = 9,
}) {
  return (
    <div style={{ width: 260, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, textAlign: "center" }}>
      <button type="button" disabled={force}
        style={{ font: "700 15px system-ui, sans-serif", padding: "11px 22px", borderRadius: radius, border: `2px solid ${accent}`, background: accent, color: "#FAF7F2", cursor: force ? "not-allowed" : "pointer", opacity: force ? 0.4 : 1, filter: force ? "grayscale(.3)" : "none" }}>
        {label}
      </button>
      <p style={{ margin: "12px 0 0", fontSize: 11, color: "#241430888", textAlign: "left" }}>Real <code>disabled</code> attribute — the browser blocks clicks and focus on its own; <code>:disabled</code> supplies the look.</p>
    </div>
  );
}