Apply

Applies changes without necessarily closing the UI.

html

<button type="button" class="btn-apply" style="--bg:#241430;border-radius:10px">
  Apply
  <span class="btn-apply__badge">3</span>
</button>
<style>
.btn-apply {
  position: relative;
  font: 600 15px/1 system-ui, sans-serif;
  padding: 11px 20px;
  border: none;
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-apply:hover:not(:disabled) { filter: brightness(1.1); }
.btn-apply:active:not(:disabled) { filter: brightness(0.92); }
.btn-apply:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-apply:disabled { opacity: .45; cursor: not-allowed; }
.btn-apply__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: #FAF7F2; color: var(--bg);
  font: 700 11px/1 system-ui, sans-serif;
}
</style>

tailwind

<button type="button" class="inline-flex items-center gap-2 px-5 py-3 text-sm font-semibold text-[#FAF7F2] border-none cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed hover:brightness-110 active:brightness-90 btn-apply-tw" style="background:#241430;border-radius:10px">
  Apply
  <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1.5 rounded-full text-[11px] font-bold" style="background:#FAF7F2;color:#241430">3</span>
</button>
<style>
.btn-apply-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function ApplyButton({
  label = "Apply",
  count = 3,
  bg = "#241430",
  radius = 10,
  disabled = false,
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "11px 20px",
        border: "none",
        borderRadius: radius,
        background: bg,
        color: "#FAF7F2",
        font: "600 15px/1 system-ui, sans-serif",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.45 : 1,
      }}
    >
      {label}
      {count > 0 && (
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            minWidth: 18,
            height: 18,
            padding: "0 5px",
            borderRadius: 999,
            background: "#FAF7F2",
            color: bg,
            font: "700 11px/1 system-ui, sans-serif",
          }}
        >
          {count}
        </span>
      )}
    </button>
  );
}