salla-placeholder
An empty-state block with an icon, a title and a description.
An empty-state block with an icon, a title and a description. Use it where a list or section has nothing to show, such as an empty wishlist or no search results. By default it shows the translated "no options" title and "empty results" description.
Use it
In HTML or JSX, use the tag <salla-placeholder> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaPlaceholder } from '@salla.sa/twilight-components-react/placeholder';Try it
web-components/salla-placeholder
Example
import { SallaPlaceholder } from '@salla.sa/twilight-components-react/placeholder';
export function Example() {
return (
<SallaPlaceholder alignment="center" iconSize="lg">
<span slot="title">Your wishlist is empty</span>
<span slot="description">Save products you like and they will appear here.</span>
</SallaPlaceholder>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alignment | alignment | Alignment of the icon and text: left, center or right. These are physical sides and do not flip in right-to-left pages. | "center" | "left" | "right" | 'left' |
icon | icon | The icon to show, as an HTML string that is inserted into the page, so only pass trusted markup. It can be inline SVG or an element with an icon font class, for example <i class="sicon-cart"></i>. Defaults to an inbox icon. | string | Inbox |
iconSize | icon-size | Size of the icon: xs, sm, md, lg, xl, xxl or xxxl. The default md is 45px for a font icon and 3.5rem width and height for an SVG icon. | "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxxl" | 'md' |
Slots
| Slot | Description |
|---|---|
description | Additional content displayed below the title. Defaults to a translated "empty results" message. |
title | The primary content of the placeholder. Defaults to a translated "no options" message. |
Related
Used inside: <salla-bullet-delivery>, <salla-gifting>, <salla-localization-modal>, <salla-loyalty>, <salla-notifications>, <salla-offer-modal>, <salla-order-summary>, <salla-product-size-guide>, <salla-rating-modal>, <salla-rating-modal-v2>, <salla-scopes>.