Component API

Properties/events/configuration exposed by a component.

html

<div class="capi">
  <table class="capi__table">
    <tr><th>prop</th><th>value</th></tr>
    <tr><td>label</td><td>"Submit"</td></tr>
    <tr><td>size</td><td>"md"</td></tr>
    <tr><td>disabled</td><td>false</td></tr>
  </table>
  <button class="capi__btn capi__btn--md" type="button" style="background:#BFD9F2;" >Submit</button>
</div>
<style>
.capi { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; max-width: 300px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.capi__table { border-collapse: collapse; width: 100%; font-size: 12px; }
.capi__table th, .capi__table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #24143018; }
.capi__table th { color: #24143099; font-weight: 600; }
.capi__btn { border: none; border-radius: 8px; color: #241430; font: 600 14px system-ui, sans-serif; cursor: pointer; width: fit-content; }
.capi__btn--sm { padding: 6px 12px; font-size: 12px; }
.capi__btn--md { padding: 10px 18px; font-size: 14px; }
.capi__btn--lg { padding: 14px 26px; font-size: 17px; }
.capi__btn:disabled { opacity: .4; cursor: not-allowed; }
.capi__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl max-w-[300px] box-border flex flex-col gap-4">
  <table class="border-collapse w-full text-xs">
    <tr><th class="text-left py-1.5 px-2 border-b border-[#24143018] text-[#24143099]">prop</th><th class="text-left py-1.5 px-2 border-b border-[#24143018] text-[#24143099]">value</th></tr>
    <tr><td class="py-1.5 px-2 border-b border-[#24143018]">label</td><td class="py-1.5 px-2 border-b border-[#24143018]">"Submit"</td></tr>
    <tr><td class="py-1.5 px-2 border-b border-[#24143018]">size</td><td class="py-1.5 px-2 border-b border-[#24143018]">"md"</td></tr>
    <tr><td class="py-1.5 px-2">disabled</td><td class="py-1.5 px-2">false</td></tr>
  </table>
  <button type="button" class="capi-tw capi-tw--md border-none rounded-lg font-semibold cursor-pointer w-fit" style="background:#BFD9F2;" >Submit</button>
</div>
<style>
.capi-tw--sm { padding: 6px 12px; font-size: 12px; }
.capi-tw--md { padding: 10px 18px; font-size: 14px; }
.capi-tw--lg { padding: 14px 26px; font-size: 17px; }
.capi-tw:disabled { opacity: .4; cursor: not-allowed; }
</style>

react

export function ComponentApi({
  label = "Submit",
  size = "md",
  disabled = false,
  accent = "#BFD9F2",
}) {
  const pad = { sm: "6px 12px", md: "10px 18px", lg: "14px 26px" }[size];
  const fontSize = { sm: 12, md: 14, lg: 17 }[size];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, maxWidth: 300, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 16 }}>
      <table style={{ borderCollapse: "collapse", width: "100%", fontSize: 12 }}>
        <tbody>
          <tr><th style={{ textAlign: "left", padding: "5px 8px", color: "#24143099" }}>prop</th><th style={{ textAlign: "left", padding: "5px 8px", color: "#24143099" }}>value</th></tr>
          <tr><td style={{ padding: "5px 8px" }}>label</td><td style={{ padding: "5px 8px" }}>"{label}"</td></tr>
          <tr><td style={{ padding: "5px 8px" }}>size</td><td style={{ padding: "5px 8px" }}>"{size}"</td></tr>
          <tr><td style={{ padding: "5px 8px" }}>disabled</td><td style={{ padding: "5px 8px" }}>{String(disabled)}</td></tr>
        </tbody>
      </table>
      <button type="button" disabled={disabled} style={{ background: accent, border: "none", borderRadius: 8, color: "#241430", fontWeight: 600, padding: pad, fontSize, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? .4 : 1, width: "fit-content" }}>{label}</button>
    </div>
  );
}