# salla-placeholder (https://docs.salla.dev/twilight/react/web-components/salla-placeholder)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
import { SallaPlaceholder } from '@salla.sa/twilight-components-react/placeholder';
```

## Try it [#try-it]

<Demo name="web-components/salla-placeholder" />

## Example [#example]

```tsx
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>
  );
}
```

```html
<salla-placeholder alignment="center" icon-size="lg">
  <span slot="title">Your wishlist is empty</span>
  <span slot="description">Save products you like and they will appear here.</span>
</salla-placeholder>
```

## Properties [#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 [#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 [#related]

Used inside: [`<salla-bullet-delivery>`](https://docs.salla.dev/twilight/react/web-components/salla-bullet-delivery), [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting), [`<salla-localization-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-localization-modal), [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-notifications>`](https://docs.salla.dev/twilight/react/web-components/salla-notifications), [`<salla-offer-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-offer-modal), [`<salla-order-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-order-summary), [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide), [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal), [`<salla-rating-modal-v2>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal-v2), [`<salla-scopes>`](https://docs.salla.dev/twilight/react/web-components/salla-scopes).