Buttons — Sizes and icon placement

Three captioned size rows compare leading icons, trailing icons and icon-only actions. Use them to choose a control size without changing the action hierarchy.

ReactHTML

1440 × 480

Open in new tab

Component.tsx55 lines

export default function ButtonsSizesIcons() {
  return (
    <div className="grid w-72 gap-5 text-neutral-900 sm:w-[26rem]">
      <div>
        <p className="text-xs text-neutral-500">Small · 32px</p>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <button type="button" className="inline-flex h-8 px-3 text-xs items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white font-medium text-neutral-900 transition-colors hover:bg-neutral-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-3.5"><path d="M12 5v14M5 12h14" /></svg>
            Add
          </button>
          <button type="button" className="inline-flex h-8 px-3 text-xs items-center justify-center gap-2 rounded-md bg-neutral-900 font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            Next
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5"><path d="M5 12h14m-6-6 6 6-6 6" /></svg>
          </button>
          <button type="button" aria-label="Add item (small size)" className="inline-flex size-8 items-center justify-center rounded-md border border-neutral-300 bg-white text-neutral-900 transition-colors hover:bg-neutral-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-3.5"><path d="M12 5v14M5 12h14" /></svg>
          </button>
        </div>
      </div>
      <div>
        <p className="text-xs text-neutral-500">Default · 44px</p>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <button type="button" className="inline-flex h-11 px-5 text-sm items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white font-medium text-neutral-900 transition-colors hover:bg-neutral-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="M12 5v14M5 12h14" /></svg>
            Add
          </button>
          <button type="button" className="inline-flex h-11 px-5 text-sm items-center justify-center gap-2 rounded-md bg-neutral-900 font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            Next
            <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="M5 12h14m-6-6 6 6-6 6" /></svg>
          </button>
          <button type="button" aria-label="Add item (default size)" className="inline-flex size-11 items-center justify-center rounded-md border border-neutral-300 bg-white text-neutral-900 transition-colors hover:bg-neutral-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="M12 5v14M5 12h14" /></svg>
          </button>
        </div>
      </div>
      <div>
        <p className="text-xs text-neutral-500">Large · 48px</p>
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <button type="button" className="inline-flex h-12 px-5 text-base items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white font-medium text-neutral-900 transition-colors hover:bg-neutral-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="M12 5v14M5 12h14" /></svg>
            Add
          </button>
          <button type="button" className="inline-flex h-12 px-5 text-base items-center justify-center gap-2 rounded-md bg-neutral-900 font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            Next
            <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="M5 12h14m-6-6 6 6-6 6" /></svg>
          </button>
          <button type="button" aria-label="Add item (large size)" className="inline-flex size-12 items-center justify-center rounded-md border border-neutral-300 bg-white text-neutral-900 transition-colors hover:bg-neutral-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="M12 5v14M5 12h14" /></svg>
          </button>
        </div>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for a size comparison and choosing leading versus trailing icons. Pick buttons-hierarchy to compare emphasis and disabled states. Variations: replace Add with a download action, use a trailing chevron for navigation, or omit icon-only actions.
Hierarchy: Read Small, Default and Large captions before comparing the same outlined Add action, filled Next action with a trailing arrow, and outlined Add item icon button. Visible action labels are one word. Icon-only names include their size; SVGs are decorative.
Responsive: Below 640px the root is 288px wide; from 640px it is 416px. Flex rows wrap if their controls do not fit, retaining 8px gaps. Heights, captions and icon sizes do not change at a breakpoint.
Layout: A 288px (w-72) root widening to 416px (sm:w-[26rem]). Three rows use 20px gaps, 12px neutral-500 captions and an 8px caption-to-controls gap. Each wrapping flex row has 8px gaps. Small controls are 32px high, px-3, text-xs, with 14px icons; default controls are 44px high, px-5, text-sm, with 20px icons; large controls are 48px high, px-5, text-base, with 20px icons. Icon-only controls are matching squares. All controls use rounded-md.
States: Primary hover fills neutral-700; secondary and icon-only hover fill neutral-50. All nine controls show a 2px neutral-900 focus-visible outline offset 2px. Colours transition in 150ms. No controls are disabled.

Desktop wireframe

┌─────────────────────────┐
│ Small / 32px            │
│ [+ Add]  [Next ->]  [+] │
│ Default / 44px          │
│ [+ Add]  [Next ->]  [+] │
│ Large / 48px            │
│ [+ Add]  [Next ->]  [+] │
└─────────────────────────┘

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 — Sizes and icon placement

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer