Card Footer

Supporting actions/content.

html

<footer class="cardfooter" style="--c:#A8E6C1;">
  <button type="button" class="cardfooter__secondary">Decline</button>
  <button type="button" class="cardfooter__primary">Approve</button>
</footer>
<style>
.cardfooter { display: flex; justify-content: flex-end; gap: 8px; font: 13px system-ui, sans-serif; border-top: 1px solid #24143018; padding-top: 12px; }
.cardfooter__primary { border: none; border-radius: 8px; padding: 8px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; background: var(--c); color: #241430; }
.cardfooter__secondary { border: 1.5px solid #24143022; border-radius: 8px; padding: 8px 14px; font: 600 13px system-ui, sans-serif; cursor: pointer; background: transparent; color: #241430; }
.cardfooter__primary:focus-visible, .cardfooter__secondary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
</style>

tailwind

<footer class="cardfooter-tw flex justify-end gap-2 font-sans text-[13px] border-t border-[#24143018] pt-3" style="--c:#A8E6C1;">
  <button type="button" class="border-[1.5px] border-[#24143022] rounded-lg px-3.5 py-2 font-semibold cursor-pointer bg-transparent text-[#241430]">Decline</button>
  <button type="button" class="border-none rounded-lg px-3.5 py-2 font-semibold cursor-pointer text-[#241430]" style="background:var(--c);">Approve</button>
</footer>

react

export function CardFooter({
  primaryLabel = "Approve",
  secondaryLabel = "Decline",
  showSecondary = true,
  color = "#A8E6C1",
}) {
  return (
    <footer style={{ display: "flex", justifyContent: "flex-end", gap: 8, font: "13px system-ui, sans-serif", borderTop: "1px solid #24143018", paddingTop: 12 }}>
      {showSecondary && (
        <button type="button" style={{ border: "1.5px solid #24143022", borderRadius: 8, padding: "8px 14px", fontWeight: 600, fontSize: 13, cursor: "pointer", background: "transparent", color: "#241430" }}>
          {secondaryLabel}
        </button>
      )}
      <button type="button" style={{ border: "none", borderRadius: 8, padding: "8px 14px", fontWeight: 600, fontSize: 13, cursor: "pointer", background: color, color: "#241430" }}>
        {primaryLabel}
      </button>
    </footer>
  );
}