The List Empty State currently lacks layout controls, making it difficult to properly design empty states within lists.
When a list has no items, the Title and Subtitle render at the top of the list container with no spacing controls, which often results in visually unbalanced layouts.
This makes it difficult to center or properly space empty states when designing polished user interfaces.
Current Behavior
When a list is empty:
- The Title appears near the top of the list container
- The Subtitle appears immediately below the title
- There are no controls for vertical spacing
Because of this, designers cannot:
- center the empty state
- add breathing room above the content
- adjust the spacing between title and subtitle
- create visually balanced empty screens
The result is that empty states often appear cramped and unintentionally aligned toward the top.
Example
In the screenshot below, the empty state content is forced to the top of the list container.
There is currently no way to adjust the spacing to move the content downward or properly separate the title and subtitle.
This limits design flexibility and requires workarounds.
Proposed Solution
Add the following three layout properties to the List Empty State settings panel:
New Controls
• Top Padding
• Bottom Padding
• Space Between Title & Subtitle
These would allow makers to control the vertical layout of the empty state directly inside the list component.
Example UI additions:
List Empty State
Top Padding
Bottom Padding
Space Between Title & Subtitle
These values could simply be numeric inputs representing pixel spacing.
Why This Matters
Empty states are important UX elements used to:
- guide users when no data exists
- provide onboarding hints
- encourage first actions (ex: create first item)
Without layout controls, it’s difficult to create professional-looking empty states.
Even small spacing adjustments can dramatically improve visual clarity and polish.
Impact
This would be a small feature with a large usability improvement for builders.
Benefits:
• Better UI design flexibility
• Cleaner empty states
• Less need for design workarounds
• More polished apps overall
Summary
Adding Top Padding, Bottom Padding, and Title/Subtitle Spacing controls to the List Empty State would significantly improve layout control while requiring minimal changes to the existing component configuration.
