Inline Toolbar

Formatting controls appearing beside selected text.

html

<div class="itb" style="--accent:#A8E6C1;">
  <p class="itb__text">Draft note: <mark class="itb__mark">Ship the pricing update by Friday.</mark></p>
  <div class="itb__toolbar itb__toolbar--above" data-placement="above" role="toolbar" aria-label="Text formatting" style="border-radius:10px;">
    <button type="button" class="itb__btn" aria-pressed="true" aria-label="Bold"><strong>B</strong></button>
    <button type="button" class="itb__btn" aria-pressed="false" aria-label="Italic"><span class="itb__i">I</span></button>
    <button type="button" class="itb__btn" aria-label="Insert link">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.5"></path><path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07L12.5 19.5"></path></svg>
    </button>
  </div>
</div>
<style>
.itb { font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: #241430; background: #FAF7F2; padding: 28px 20px; display: flex; flex-direction: column; align-items: flex-start; }
.itb__text { margin: 0; max-width: 360px; }
.itb__mark { background: color-mix(in srgb, var(--accent) 40%, transparent); padding: 1px 2px; border-radius: 3px; }
.itb__toolbar { display: inline-flex; gap: 4px; background: #241430; padding: 6px; order: 2; margin-top: 10px; }
.itb__toolbar--above { order: -1; margin-top: 0; margin-bottom: 10px; }
.itb__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: #FAF7F2; border-radius: 6px; cursor: pointer; }
.itb__i { font-style: italic; font-size: 14px; }
.itb__btn[aria-pressed="true"] { background: var(--accent); color: #241430; }
.itb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="flex flex-col items-start bg-[#FAF7F2] text-[#241430] font-sans px-5 py-7" style="--accent:#A8E6C1;">
  <p class="m-0 max-w-[360px]">Draft note: <mark class="itb-tw__mark px-0.5 rounded-[3px]" style="background:color-mix(in srgb, #A8E6C1 40%, transparent)">Ship the pricing update by Friday.</mark></p>
  <div class="itb-tw itb-tw--above inline-flex gap-1 bg-[#241430] p-1.5" data-placement="above" role="toolbar" aria-label="Text formatting" style="border-radius:10px;">
    <button type="button" class="itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer" aria-pressed="true" aria-label="Bold"><strong>B</strong></button>
    <button type="button" class="itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer italic text-sm" aria-pressed="false" aria-label="Italic">I</button>
    <button type="button" class="itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer" aria-label="Insert link">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.5"></path><path d="M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07L12.5 19.5"></path></svg>
    </button>
  </div>
</div>
<style>
.itb-tw--below { order: 2; margin-top: 10px; }
.itb-tw--above { order: -1; margin-bottom: 10px; }
.itb-tw__btn[aria-pressed="true"] { background: #A8E6C1; color: #241430; }
.itb-tw__btn:focus-visible { outline: 2px solid #A8E6C1; outline-offset: 2px; }
</style>

react

export function InlineToolbar({
  selectedText = "Ship the pricing update by Friday.",
  placement = "above",
  accent = "#A8E6C1",
  radius = 10,
  boldActive = true,
  italicActive = false,
}) {
  const order = { above: -1, below: 2 }[placement] ?? 2;
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.6, color: "#241430", background: "#FAF7F2", padding: "28px 20px" }}>
      <p style={{ margin: 0, maxWidth: 360 }}>
        Draft note: <mark style={{ background: accent + "66", padding: "1px 2px", borderRadius: 3 }}>{selectedText}</mark>
      </p>
      <div role="toolbar" aria-label="Text formatting" data-placement={placement} style={{
        display: "inline-flex", gap: 4, background: "#241430", padding: 6, borderRadius: radius, order,
        marginTop: placement === "above" ? 0 : 10, marginBottom: placement === "above" ? 10 : 0,
      }}>
        <button type="button" aria-pressed={boldActive} aria-label="Bold" style={{
          width: 28, height: 28, border: "none", borderRadius: 6, cursor: "pointer", fontWeight: 700,
          background: boldActive ? accent : "transparent", color: boldActive ? "#241430" : "#FAF7F2",
        }}>B</button>
        <button type="button" aria-pressed={italicActive} aria-label="Italic" style={{
          width: 28, height: 28, border: "none", borderRadius: 6, cursor: "pointer", fontStyle: "italic", fontSize: 14,
          background: italicActive ? accent : "transparent", color: italicActive ? "#241430" : "#FAF7F2",
        }}>I</button>
      </div>
    </div>
  );
}