Tertiary Button

Low-emphasis action.

html

<button type="button" class="btn-tertiary" style="--bg:#241430;border-radius:8px">Skip</button>
<style>
.btn-tertiary {
  font: 500 14px/1 system-ui, sans-serif;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn-tertiary--underline { text-decoration: underline; text-underline-offset: 3px; }
.btn-tertiary:hover:not(:disabled) { background: rgba(36,20,48,.05); }
.btn-tertiary:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-tertiary:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="px-2.5 py-2 text-sm font-medium bg-transparent border-none cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-black/5 btn-tertiary-tw" style="color:#241430;border-radius:8px">Skip</button>
<style>
.btn-tertiary-tw--underline { text-decoration: underline; text-underline-offset: 3px; }
.btn-tertiary-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function TertiaryButton({
  label = "Skip",
  bg = "#241430",
  radius = 8,
  underline = false,
  disabled = false,
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        padding: "8px 10px",
        borderRadius: radius,
        border: "none",
        background: "transparent",
        color: bg,
        font: "500 14px/1 system-ui, sans-serif",
        textDecoration: underline ? "underline" : "none",
        textUnderlineOffset: 3,
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      {label}
    </button>
  );
}