Text Button

Button represented primarily by text.

html

<button type="button" class="btn-text btn-text--md" style="--bg:#241430">
  View details
  <span class="btn-text__chevron"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6"/></svg></span>
</button>
<style>
.btn-text {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 15px/1 system-ui, sans-serif;
  padding: 4px 2px;
  border: none;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.btn-text--sm { font-size: 13px; }
.btn-text__chevron { display: inline-flex; transform: rotate(-90deg); }
.btn-text:hover:not(:disabled) { border-bottom-color: var(--bg); }
.btn-text:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-text:disabled { opacity: .4; cursor: not-allowed; }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-1 py-1 px-0.5 bg-transparent border-none border-b-[1.5px] border-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:border-current btn-text-tw btn-text-tw--md" style="color:#241430">
  View details
  <span class="inline-flex -rotate-90"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6"/></svg></span>
</button>
<style>
.btn-text-tw--sm { font-size: 13px; font-weight: 600; }
.btn-text-tw--md { font-size: 15px; font-weight: 600; }
.btn-text-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function TextButton({
  label = "View details",
  size = "md",
  bg = "#241430",
  withIcon = true,
  disabled = false,
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 4,
        padding: "4px 2px",
        border: "none",
        borderBottom: "1.5px solid transparent",
        background: "transparent",
        color: bg,
        fontWeight: 600,
        fontSize: size === "sm" ? 13 : 15,
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1,
      }}
    >
      {label}
      {withIcon && (
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: "rotate(-90deg)" }} aria-hidden="true">
          <path d="M6 9l6 6 6-6" />
        </svg>
      )}
    </button>
  );
}