Close

Dismisses an interface element.

html

<button type="button" class="btn-close btn-close--md" style="--bg:#241430;border-radius:999px" aria-label="Close">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
<style>
.btn-close {
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: #241430;
  cursor: pointer;
  padding: 8px;
}
.btn-close--sm { padding: 5px; }
.btn-close--lg { padding: 11px; }
.btn-close:hover:not(:disabled) { background: rgba(36,20,48,.1); color: var(--bg); }
.btn-close:active:not(:disabled) { background: rgba(36,20,48,.18); }
.btn-close:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-close:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center justify-center border-none bg-transparent cursor-pointer text-[#241430] disabled:opacity-40 disabled:cursor-not-allowed hover:bg-black/10 active:bg-black/15 btn-close-tw btn-close-tw--md" style="border-radius:999px" aria-label="Close">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
<style>
.btn-close-tw--sm { padding: 5px; }
.btn-close-tw--md { padding: 8px; }
.btn-close-tw--lg { padding: 11px; }
.btn-close-tw:hover:not(:disabled) { color: #241430; }
.btn-close-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function CloseButton({
  label = "Close",
  size = "md",
  bg = "#241430",
  radius = 999,
  disabled = false,
}) {
  const pad = size === "sm" ? 5 : size === "lg" ? 11 : 8;
  return (
    <button
      type="button"
      aria-label={label}
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        padding: pad,
        borderRadius: radius,
        border: "none",
        background: "transparent",
        color: "#241430",
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
      onMouseOver={(e) => (e.currentTarget.style.color = bg)}
      onMouseOut={(e) => (e.currentTarget.style.color = "#241430")}
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M6 6l12 12M18 6L6 18" />
      </svg>
    </button>
  );
}