Empty
Seven variants across two components: four blocks that switch the title and the description on and off, and three kinds of media to head them with.
Show Title and Show Description give four heights between 176 and 289. The buttons are not on an axis at all: you edit them in place, which is why the usage frame can put two side by side, drop to one, or swap the lot for a search field without needing a variant for each.
No fill, no border, only a 14px radius waiting to be used. An empty state is almost always already inside something with a boundary, a card, a panel, a table body, and giving it a second one would draw a box inside a box.
A glyph, a face, or a group of them
Published separately so the block does not need a media axis of its own. Icon is a 16px Tabler glyph in a 32px base.muted tile; Avatar is a single 48px circle; AvatarGroup is three 32px circles overlapping by 8 with a 2px white ring each.
Only Icon carries a tile. An avatar is already a shape with an edge, so putting it on a muted square would give it a second one; the group's white rings do the same job of separating it from whatever it sits on.
Five empties, none of them the same shape
900 by 1740. Two actions side by side, one action alone, both avatar media types, and a search field where the buttons would be. The copy is the file's.
Two components, seven variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Empty block
Because the actions are the part that changes most and a variant per shape would run away from you. The usage frame puts two side by side, drops to one, and swaps the pair for a search field, all by editing the instance. The axes cover the text, which is where the height actually comes from.
An empty state is nearly always already inside a boundary: a card, a panel, the body of a table. Giving it a surface of its own would draw a box inside a box. The 14px radius is there for the times you do want to paint it.
So the block does not need a media axis multiplying its four variants by three. Icon is a 16px Tabler glyph on a 32px base.muted tile, Avatar is a single 48px circle, and AvatarGroup is three 32px circles overlapping by 8 with a 2px white ring each.
An avatar is already a shape with a defined edge, so a muted square behind it reads as a second frame. The group's white rings do the separating instead, which is the same job the tile does for a glyph that would otherwise float.
You get the 176 tall version: media, then the actions. It is the shape to reach for when the surrounding panel already carries a heading and repeating it inside the block would say the same thing twice.