Compact Button

A small square button for a single icon — close, more, copy, expand — at 24 to 32px, where a full button would crowd its neighbours.

Preview

When to use

• For dismiss and overflow controls on cards, toasts and modals.
• For inline utilities: copy, collapse, drag handle.

Anatomy

1. 1

   Container

   Square, fully rounded or 6px, ghost or stroked.

2. 2

   Icon

   16 to 20px, centred.

States

Accessibility

• Always has an aria-label: an icon alone is not a name.
• The hit area is at least 24×24 even when the glyph is smaller.

Source

The Compact Button is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.