Buttons — Icon toolbar with primary action

A compact toolbar groups icon actions beside a primary save action. Use it when frequent editing tools need short accessible names and hover or focus tooltips.

ReactHTML

1440 × 480

Open in new tab

Component.tsx36 lines

export default function ButtonsToolbar() {
  return (
    <div className="h-24 w-72 text-neutral-900 sm:w-[28rem]">
      <div className="flex items-center gap-1 rounded-lg border border-neutral-200 bg-white p-1">
        <div role="group" aria-label="History actions" className="flex">
          <button type="button" aria-label="Undo" className="group relative inline-flex size-9 shrink-0 items-center justify-center rounded-md text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="m9 4-5 5 5 5M4 9h9a6 6 0 0 1 0 12" /></svg>
            <span aria-hidden="true" className="pointer-events-none absolute left-0 top-full z-10 mt-2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Undo</span>
          </button>
          <button type="button" disabled aria-label="Redo" className="group relative inline-flex size-9 shrink-0 items-center justify-center rounded-md text-neutral-900 transition-colors cursor-not-allowed opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="m15 4 5 5-5 5m5-5h-9a6 6 0 0 0 0 12" /></svg>
            <span aria-hidden="true" className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-full z-10 mt-2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Redo</span>
          </button>
        </div>
        <span aria-hidden="true" className="h-5 w-px shrink-0 bg-neutral-200" />
        <div role="group" aria-label="Formatting actions" className="flex">
          <button type="button" aria-label="Bold" className="group relative inline-flex size-9 shrink-0 items-center justify-center rounded-md text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M6 4h7a4 4 0 0 1 0 8H6Zm0 8h8a4 4 0 0 1 0 8H6Z" /></svg>
            <span aria-hidden="true" className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-full z-10 mt-2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Bold</span>
          </button>
          <button type="button" aria-label="Italic" className="group relative inline-flex size-9 shrink-0 items-center justify-center rounded-md text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M10 4h9M5 20h9M15 4 9 20" /></svg>
            <span aria-hidden="true" className="pointer-events-none absolute left-1/2 -translate-x-1/2 top-full z-10 mt-2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Italic</span>
          </button>
          <button type="button" aria-label="Underline" className="group relative inline-flex size-9 shrink-0 items-center justify-center rounded-md text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M6 4v7a6 6 0 0 0 12 0V4M4 21h16" /></svg>
            <span aria-hidden="true" className="pointer-events-none absolute right-0 top-full z-10 mt-2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Underline</span>
          </button>
        </div>
        <span aria-hidden="true" className="h-5 w-px shrink-0 bg-neutral-200" />
        <button type="button" className="ml-auto inline-flex h-9 items-center justify-center rounded-md bg-neutral-900 px-3 text-sm font-medium whitespace-nowrap text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Save<span className="hidden sm:inline">&nbsp;changes</span></button>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for frequent editing actions with one distinct save action. Pick buttons-joined-group for labelled alternatives or counters. Variations: replace formatting tools with item actions, remove the disabled example, or rename the primary to Apply. Toolbar controls are 36px high.
Hierarchy: History actions precede formatting actions, with a filled Save button last. Icons are named Undo, Redo, Bold, Italic and Underline through aria-label; matching tooltip text is aria-hidden. Primary text is Save below 640px and Save changes from 640px. Tooltips use one word each.
Responsive: Below 640px the strip fits 288px and the primary reads Save; at 640px it widens to 448px and adds changes. Icon groups remain on one row at every width. First and last tooltip alignments keep captions within the frame.
Layout: A 288px-wide (w-72) root widens to 448px (sm:w-[28rem]) and reserves 96px (h-24) for tooltips. One 46px-high white strip uses rounded-lg, a 1px neutral-200 border, p-1 and gap-1. Groups contain two and three 36px (size-9) ghost buttons with 20px icons, separated by 1px-wide, 20px-high dividers. A 36px compact primary action sits at ml-auto with px-3. Tooltips are absolute, top-full plus 8px, rounded-md, px-2 py-1, text-xs and nowrap.
States: Enabled ghost buttons fill neutral-100 on hover; Save fills neutral-700. Focus-visible outlines are 2px neutral-900 with a 2px offset. Tooltips reveal on group-hover and group-focus-visible through a 150ms opacity transition, removed by reduced-motion preference. Redo is native disabled with 50% opacity and a not-allowed cursor, without a button hover fill.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ [Undo][Redo] | [Bold][Italic][Underline] [Save]  │ │
│ └──────────────────────────────────────────────────┘ │
│      Tooltip below focused or hovered icon           │
└──────────────────────────────────────────────────────┘

View all

Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Confirmation footer
Layout tags: stacked,split,compact

Buttons — Icon toolbar with primary action

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer