Variant

Alternative component configuration.

html

<button type="button" class="vbtn vbtn--primary" style="--accent:#A8E6C1;">Confirm</button>
<style>
.vbtn { font: 600 14px system-ui, sans-serif; padding: 10px 20px; border-radius: 8px; cursor: pointer; box-sizing: border-box; }
.vbtn--pill { border-radius: 999px; }
.vbtn--primary { background: var(--accent); color: #241430; border: none; }
.vbtn--secondary { background: transparent; color: #241430; border: 2px solid var(--accent); }
.vbtn--ghost { background: transparent; color: var(--accent); border: none; text-decoration: underline; }
.vbtn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<button type="button" class="vbtntw vbtntw--primary font-semibold text-sm py-2.5 px-5 rounded-lg cursor-pointer box-border" style="--accent:#A8E6C1;">Confirm</button>
<style>
.vbtntw--pill { border-radius: 999px; }
.vbtntw--primary { background: var(--accent); color: #241430; border: none; }
.vbtntw--secondary { background: transparent; color: #241430; border: 2px solid var(--accent); }
.vbtntw--ghost { background: transparent; color: var(--accent); border: none; text-decoration: underline; }
</style>

react

export function Variant({
  label = "Confirm",
  variant = "primary",
  accent = "#A8E6C1",
  rounded = false,
}) {
  const styles = {
    primary: { background: accent, color: "#241430", border: "none" },
    secondary: { background: "transparent", color: "#241430", border: `2px solid ${accent}` },
    ghost: { background: "transparent", color: accent, border: "none", textDecoration: "underline" },
  }[variant];
  return (
    <button type="button" style={{ font: "600 14px system-ui, sans-serif", padding: "10px 20px", borderRadius: rounded ? 999 : 8, cursor: "pointer", boxSizing: "border-box", ...styles }}>
      {label}
    </button>
  );
}