Button

Performs an action.

html

<button class="btn btn--primary">Save changes</button>
<style>
.btn {
  font: 500 16px/1 system-ui, sans-serif;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid #241430;
  background: #241430;
  color: #FAF7F2;
  cursor: pointer;
}
.btn--secondary { background: transparent; color: #241430; }
.btn--ghost { background: transparent; border-color: transparent; color: #241430; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
</style>

tailwind

<button class="btn-tw btn-tw--primary px-5 py-3 text-base font-medium border-2 disabled:opacity-45 disabled:cursor-not-allowed" style="border-radius:10px;background:#241430;border-color:#241430;color:#FAF7F2">Save changes</button>
<style>
.btn-tw--secondary { background: transparent !important; color: #241430; }
.btn-tw--ghost { background: transparent !important; border-color: transparent !important; color: #241430; }
</style>

react

export function Button({
  label = "Save changes",
  variant = "primary",
  disabled = false,
}) {
  const base = {
    padding: "12px 20px",
    borderRadius: 10,
    border: "2px solid #241430",
    background: variant === "primary" ? "#241430" : "transparent",
    color: variant === "primary" ? "#FAF7F2" : "#241430",
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.45 : 1,
  };
  return <button style={base} disabled={disabled}>{label}</button>;
}