Widget Footer

Optional supporting information/actions.

html

<footer class="wfooter" style="--c:#A8E6C1;">
  <span class="wfooter__note">Last updated 4 minutes ago</span>
  <button type="button" class="wfooter__action">View report</button>
</footer>
<style>
.wfooter { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 12px system-ui, sans-serif; color: #241430; border-top: 1px solid #24143018; padding-top: 8px; margin-top: 8px; }
.wfooter__note { opacity: .65; }
.wfooter__action { background: transparent; border: 1.5px solid var(--c); border-radius: 8px; padding: 5px 10px; font: 600 12px system-ui, sans-serif; cursor: pointer; color: #241430; }
.wfooter__action:hover, .wfooter__action:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }
</style>

tailwind

<footer class="wfooter-tw flex justify-between items-center gap-2.5 font-sans text-xs text-[#241430] border-t border-[#24143018] pt-2 mt-2" style="--c:#A8E6C1;">
  <span class="opacity-65">Last updated 4 minutes ago</span>
  <button type="button" class="bg-transparent border-[1.5px] rounded-lg px-2.5 py-1.5 text-xs font-semibold cursor-pointer" style="border-color:var(--c);">View report</button>
</footer>

react

export function WidgetFooter({
  note = "Last updated 4 minutes ago",
  actionLabel = "View report",
  showAction = true,
  color = "#A8E6C1",
}) {
  return (
    <footer style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, font: "12px system-ui, sans-serif", color: "#241430", borderTop: "1px solid #24143018", paddingTop: 8, marginTop: 8 }}>
      <span style={{ opacity: 0.65 }}>{note}</span>
      {showAction && (
        <button type="button" style={{ background: "transparent", border: "1.5px solid " + color, borderRadius: 8, padding: "5px 10px", fontSize: 12, fontWeight: 600, cursor: "pointer", color: "#241430" }}>
          {actionLabel}
        </button>
      )}
    </footer>
  );
}