Prompt Suggestion

Suggested prompt/action.

html

<button type="button" class="ps ps--chip" style="--accent:#E8A020;">
  <span class="ps__label">Summarise this thread</span>
  <span class="ps__arrow" aria-hidden="true">→</span>
</button>
<style>
.ps { font: 500 14px system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: #FAF7F2; color: #241430; }
.ps--chip { border: 1.5px solid var(--accent); border-radius: 999px; padding: 8px 16px; }
.ps--button { border: none; border-radius: 8px; padding: 10px 18px; background: var(--accent); }
.ps:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps:hover { filter: brightness(0.97); }
.ps:hover .ps__arrow { transform: translateX(2px); }
@media (prefers-reduced-motion: no-preference) {
  .ps__arrow { transition: transform .15s ease; }
}
</style>

tailwind

<button type="button" class="ps-tw ps-tw--chip inline-flex items-center gap-2 font-medium text-sm cursor-pointer bg-[#FAF7F2] text-[#241430]" style="--accent:#E8A020;">
  <span>Summarise this thread</span>
  <span aria-hidden="true" class="ps-tw__arrow">→</span>
</button>
<style>
.ps-tw--chip { border: 1.5px solid var(--accent); border-radius: 999px; padding: 8px 16px; }
.ps-tw--button { border: none; border-radius: 8px; padding: 10px 18px; background: var(--accent); }
.ps-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-tw:hover .ps-tw__arrow { transform: translateX(2px); }
.ps-tw__arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ps-tw__arrow { transition: transform .15s ease; }
}
</style>

react

export function PromptSuggestion({
  label = "Summarise this thread",
  accent = "#E8A020",
  variant = "chip",
  showArrow = true,
}) {
  const shapeStyle = variant === "chip"
    ? { border: `1.5px solid ${accent}`, borderRadius: 999, padding: "8px 16px", background: "#FAF7F2" }
    : { border: "none", borderRadius: 8, padding: "10px 18px", background: accent };
  return (
    <button type="button" style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer",
      font: "500 14px system-ui, sans-serif", color: "#241430", ...shapeStyle }}>
      <span>{label}</span>
      {showArrow && <span aria-hidden="true">→</span>}
    </button>
  );
}