Empty State generator
Every list, related list and search result needs a designed "nothing here yet" moment instead of a blank rectangle. Style the illustration, heading and optional call-to-action so empty states guide users toward their next action instead of looking broken.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="studio-empty-state slds-illustration slds-illustration_small">
<lightning-icon icon-name="utility:open_folder" size="large" class="studio-empty-state__icon"></lightning-icon>
<h3 class="studio-empty-state__heading">No records yet</h3>
<p class="studio-empty-state__body">Create your first record to see it appear here.</p>
<lightning-button variant="brand" label="Create record" class="studio-empty-state__cta" onclick={handleAction}></lightning-button>
</div>
</template>Design tips for empty states
- Always explain *why* it’s empty and *what to do next* — "No records yet" plus a "Create" button beats a bare icon.
- Match the illustration tone to the situation: a search icon for "no results," not a generic inbox, sets the right expectation.
- Keep body copy to one sentence; empty states are a pause in the workflow, not a place for paragraphs.