Extra Small Buttons
Compact, low height buttons with tight padding and small type. Ideal for dense toolbars, table rows, and inline controls where space is limited.
Compact, low height buttons with tight padding and small type. Ideal for dense toolbars, table rows, and inline controls where space is limited.
Search blocks by description or jump to a page.
Extra Small Buttons shows five compact button variants arranged in a single centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Each button carries tight horizontal padding and extra small type, keeping the overall height low so the buttons sit comfortably in dense layouts without demanding vertical space.
All five variants are independent of one another. You can keep only the ones your interface needs, relabel them to match your action vocabulary, or reorder them. Because they are the standard button variants sized down rather than a custom component, they inherit any global button styling already in your project.
Reach for this block on screens where actions compete with data for space. In a real estate marketplace, for example, a property listing table might need Save, Compare, and Contact buttons beside each row without pushing rows apart. The compact size also suits filter toolbars, admin panels, and inline controls inside cards or data grids where a full-height button would feel visually dominant.
When you need a single prominent call to action rather than many small ones, the Extra Large Buttons block is the better fit.
A natural flow around it on a Components page:
Before
After
Five ready-to-use variants cover the most common action types in a tight footprint. A few ways to put them to work:
Tip: pair the Ghost variant with an icon and no label when horizontal space is critically tight; the small text size keeps icon-only buttons legible.