Props

Data/configuration passed to a component.

html

<div class="propsx">
  <code class="propsx__obj">{ text: "New", color: "#F5C2E0", size: "md", uppercase: false }</code>
  <span class="propsx__arrow" aria-hidden="true">&darr; passed as props</span>
  <span class="propsx__chip propsx__chip--md" style="background:#F5C2E0;">New</span>
</div>
<style>
.propsx { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; text-align: center; }
.propsx__obj { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; word-break: break-all; text-align: left; }
.propsx__arrow { display: block; font-size: 10px; color: #24143080; margin-bottom: 12px; }
.propsx__chip { display: inline-block; border-radius: 999px; font-weight: 700; color: #241430; }
.propsx__chip--sm { padding: 4px 10px; font-size: 11px; }
.propsx__chip--md { padding: 8px 18px; font-size: 14px; }
.propsx__chip--lg { padding: 12px 26px; font-size: 18px; }
.propsx__chip--upper { text-transform: uppercase; letter-spacing: .04em; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border text-center">
  <code class="block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-2.5 break-all text-left">{ text: "New", color: "#F5C2E0", size: "md", uppercase: false }</code>
  <span class="block text-[10px] text-[#24143080] mb-3" aria-hidden="true">&darr; passed as props</span>
  <span class="propstw propstw--md inline-block rounded-full font-bold text-[#241430]" style="background:#F5C2E0;">New</span>
</div>
<style>
.propstw--sm { padding: 4px 10px; font-size: 11px; }
.propstw--md { padding: 8px 18px; font-size: 14px; }
.propstw--lg { padding: 12px 26px; font-size: 18px; }
</style>

react

export function Props({
  text = "New",
  color = "#F5C2E0",
  size = "md",
  uppercase = false,
}) {
  const dims = { sm: { padding: "4px 10px", fontSize: 11 }, md: { padding: "8px 18px", fontSize: 14 }, lg: { padding: "12px 26px", fontSize: 18 } }[size];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box", textAlign: "center" }}>
      <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, background: "#24143012", padding: "8px 10px", borderRadius: 6, marginBottom: 10, wordBreak: "break-all", textAlign: "left" }}>{`{ text: "${text}", color: "${color}", size: "${size}", uppercase: ${uppercase} }`}</code>
      <span style={{ display: "block", fontSize: 10, color: "#24143080", marginBottom: 12 }} aria-hidden="true">&darr; passed as props</span>
      <span style={{ display: "inline-block", borderRadius: 999, fontWeight: 700, color: "#241430", background: color, textTransform: uppercase ? "uppercase" : "none", letterSpacing: uppercase ? ".04em" : "normal", ...dims }}>{text}</span>
    </div>
  );
}