Empty State
Empty State
Basic
Empty state with icon, title, and description.
No messages yet
Start a conversation to see messages here.
<.empty_state>
<:icon><Icons.icon_chat class="w-8 h-8" /></:icon>
<:title>No messages yet</:title>
<:description>Start a conversation.</:description>
</.empty_state>
With Action
Empty state with a call-to-action button.
No channels joined
Browse available channels and join one to start chatting.
<.empty_state>
<:icon><Icons.icon_channels class="w-8 h-8" /></:icon>
<:title>No channels joined</:title>
<:description>Browse and join a channel.</:description>
<:action>
<.button variant="outline" size="sm">Browse</.button>
</:action>
</.empty_state>
Variations
Different icons and contexts for empty states.
No results
Try a different search term.
No contacts
Add users to your address book.
<.empty_state>
<:icon><Icons.icon_btn_search class="w-8 h-8" /></:icon>
<:title>No results</:title>
<:description>Try different terms.</:description>
</.empty_state>
Language
14 objects
