Inconsistent Component

html

<div class="ic-demo">
  <span class="ic-demo__badge">{{unless fixed}}&#10007; Anti-pattern: inconsistent component

tailwind

<div style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  <span class="ic-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: inconsistent component

react

export function InconsistentComponent({
  label = "Submit",
  fixed = false,
  accentA = "#241430",
  accentB = "#E8A020",
}) {
  const btn = { border: "none", padding: "9px 18px", fontWeight: 700, color: "#FAF7F2", cursor: "pointer" };
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: inconsistent component"}
      </span>
      <p style={{ margin: "10px 0 4px", fontSize: 11, color: "#241430aa" }}>Checkout page</p>
      <button type="button" style={{ ...btn, background: accentA, borderRadius: 4 }}>{label}</button>
      <p style={{ margin: "10px 0 4px", fontSize: 11, color: "#241430aa" }}>Settings page</p>
      <button type="button" style={{ ...btn, background: fixed ? accentA : accentB, borderRadius: fixed ? 4 : 999 }}>{label}</button>
    </div>
  );
}