Discoverability

How easily users can discover functionality.

html

<div class="uif-dis-stage" data-icon="filter">
  <button type="button" class="uif-dis-btn" style="color:#241430;">
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path class="uif-dis-icon uif-dis-icon--filter" fill="currentColor" d="M3 5h18v2l-7 8v5l-4-2v-3L3 7z"/><path class="uif-dis-icon uif-dis-icon--export" fill="currentColor" d="M12 3l5 5h-3v7h-4V8H7z"/><path class="uif-dis-icon uif-dis-icon--share" fill="currentColor" d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 2.4L9 9.7A3 3 0 1 0 9 14.3l6.2 3.3A3 3 0 1 0 15 15l-6-3.2a3 3 0 0 0 0-1.6L15 7a3 3 0 0 0 3 1z"/></svg>
    
  </button>
  
  <p class="uif-dis-caption">Icon-only &mdash; toggle to compare how easily this is found</p>
</div>
<style>
.uif-dis-stage { position: relative; width: 100%; max-width: 320px; padding: 26px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }
.uif-dis-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #24143022; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.uif-dis-icon { display: none; }
[data-icon="filter"] .uif-dis-icon--filter,
[data-icon="export"] .uif-dis-icon--export,
[data-icon="share"] .uif-dis-icon--share { display: block; }
.uif-dis-label { text-transform: capitalize; font-weight: 600; color: #241430; }
.uif-dis-tip { display: block; margin-top: 8px; font-size: 11px; background: #241430; color: #fff; border-radius: 6px; padding: 4px 8px; text-transform: capitalize; }
.uif-dis-caption { margin: 14px 0 0; }
</style>

tailwind

<div class="relative w-full max-w-[320px] p-[26px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center" data-icon="filter">
  <button type="button" class="inline-flex items-center gap-1.5 bg-white border-[1.5px] border-[#24143022] rounded-lg px-3 py-2 cursor-pointer" style="color:#241430;">
    <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path class="tw-dis-icon tw-dis-filter" fill="currentColor" d="M3 5h18v2l-7 8v5l-4-2v-3L3 7z"/><path class="tw-dis-icon tw-dis-export" fill="currentColor" d="M12 3l5 5h-3v7h-4V8H7z"/><path class="tw-dis-icon tw-dis-share" fill="currentColor" d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 2.4L9 9.7A3 3 0 1 0 9 14.3l6.2 3.3A3 3 0 1 0 15 15l-6-3.2a3 3 0 0 0 0-1.6L15 7a3 3 0 0 0 3 1z"/></svg>
    
  </button>
  
  <p class="mt-3.5">Icon-only &mdash; toggle to compare how easily this is found</p>
</div>
<style>
.tw-dis-icon { display: none; }
[data-icon="filter"] .tw-dis-filter,
[data-icon="export"] .tw-dis-export,
[data-icon="share"] .tw-dis-share { display: block; }
</style>

react

export function Discoverability({
  labelled = false,
  tooltip = false,
  icon = "filter",
  accent = "#241430",
}) {
  const paths = {
    filter: "M3 5h18v2l-7 8v5l-4-2v-3L3 7z",
    export: "M12 3l5 5h-3v7h-4V8H7z",
    share: "M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 2.4L9 9.7A3 3 0 1 0 9 14.3l6.2 3.3A3 3 0 1 0 15 15l-6-3.2a3 3 0 0 0 0-1.6L15 7a3 3 0 0 0 3 1z",
  };
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 320, padding: 26, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa", textAlign: "center" }}>
      <button type="button" style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "#fff", border: "1.5px solid #24143022", borderRadius: 8, padding: "8px 12px", cursor: "pointer", color: accent }}>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d={paths[icon]} /></svg>
        {labelled && <span style={{ textTransform: "capitalize", fontWeight: 600, color: "#241430" }}>{icon}</span>}
      </button>
      {tooltip && <span style={{ display: "block", marginTop: 8, fontSize: 11, background: "#241430", color: "#fff", borderRadius: 6, padding: "4px 8px", textTransform: "capitalize" }}>{icon}</span>}
      <p style={{ margin: "14px 0 0" }}>{labelled ? "Labelled" : "Icon-only"}{tooltip ? " + tooltip" : ""} &mdash; toggle to compare how easily this is found</p>
    </div>
  );
}