--- meta: title: Empty State description: Empty states are used to communicate that there's no content to display and guide users on what to do next. layout: component --- ```html:preview ``` Empty states appear when a list, table, or other container has no content to show. They help users understand why content is missing and often provide actions to resolve the empty state. ## Examples ### Basic Empty State A basic empty state with a caption and description. ```html:preview ``` ### Without Icon Empty states can be displayed without an icon if you prefer a more minimal look. ```html:preview ``` ### Types Use the `type` attribute to apply semantic styling to the empty state. Available types are `primary`, `info`, and `error`. ```html:preview

``` ### With Action Buttons Use the default slot to add action buttons that help users resolve the empty state. ```html:preview Upload File ``` ### With Multiple Actions Combine multiple buttons using the button group component for more complex actions. ```html:preview Clear Filters New Search ``` ### Padded Use the `padded` attribute to add extra spacing around the empty state content. This is useful when the empty state is displayed within a container that needs additional visual breathing room. ```html:preview Manage Settings ``` ### Using Slots Empty states support slots for more flexible content customization. You can use the `caption` and `description` slots to provide rich HTML content. #### Caption Slot ```html:preview
No Projects Found
Projects you create will appear here.
Create Project ``` #### Rich Description Content ```html:preview

Get started by creating your first resource.

Need help? View documentation

Get Started Take Tour ``` ## Common Use Cases ### No Search Results ```html:preview Clear Search Reset Filters ``` ### Empty List ```html:preview Add Item ``` ### Connection Error ```html:preview Retry Go Back ``` ### Permission Denied ```html:preview Back to Dashboard ``` ### Empty Inbox ```html:preview Compose Message ``` ### No Data Available ```html:preview Refresh ``` ### First Time User ```html:preview Start Tour Skip ``` ### Empty Cart ```html:preview Continue Shopping ``` ### No Favorites ```html:preview Explore Items ``` ### Maintenance Mode ```html:preview Check Status ``` ### Deleted Items ```html:preview ``` ### Completed Tasks ```html:preview Add Task View Completed ``` ## Best Practices ### Helpful Icons Choose icons that clearly communicate the empty state's context. For example, use `inbox` for empty inboxes, `search_off` for no search results, and `cloud_off` for connection errors. ```html:preview
``` ### Clear Actions Always provide clear next steps when possible. Tell users what they can do to resolve the empty state. ```html:preview Invite Team Member ``` ### Appropriate Tone Match the tone of your message to the context. Celebratory for completed tasks, helpful for new users, and informative for errors. ```html:preview ```