mds components
mds:empty-state
What to show when there is nothing to show.
Your cart is empty
You haven't added anything to your cart yet.
<mds:empty-state
icon="shopping-cart"
title="Your cart is empty"
description="You haven't added anything to your cart yet."
>
<flux:button variant="primary">Browse deals</flux:button>
<flux:button variant="ghost">Order history</flux:button>
</mds:empty-state>Without actions
No results
Try a different search term or clear your filters.
<mds:empty-state
icon="magnifying-glass"
title="No results"
description="Try a different search term or clear your filters."
/>In RTL
All the copy here is yours, so nothing reads config('mds.persian_digits') — a Persian empty state is just Persian props on an RTL page.
سبد خرید شما خالی است
هنوز کالایی به سبد خرید خود اضافه نکردهاید.
<mds:empty-state
icon="shopping-cart"
title="سبد خرید شما خالی است"
description="هنوز کالایی به سبد خرید خود اضافه نکردهاید."
>
<flux:button variant="primary">مشاهده پیشنهادها</flux:button>
<flux:button variant="ghost">تاریخچه سفارشها</flux:button>
</mds:empty-state>Reference
mds:empty-state
| Prop | Description |
|---|---|
| icon | Icon shown above the title. |
| title | Headline. |
| description | Supporting copy. |
| Slot | Description |
|---|---|
| default | Action buttons under the description. |