Skip to content
Twilight React Playground
ثيم رائدaren

NoContent

componentBeginnerserverbrowserlive demo

The empty-state block: an icon, a message and an optional button, as the engine shows for an empty cart or category.

import { NoContent } from '@salla.sa/twilight-theme-engine/components/common';

In plain words

An empty list deserves a friendly message, not a blank space: "Your wishlist is empty", an icon, and maybe a button back to the shop. NoContent draws exactly that, in the storefront's own style.

Signature

const NoContent: LazyExoticComponent<(props: NoContentProps) => JSX.Element>

// NoContentProps is not exported: use ComponentProps<typeof NoContent>
interface NoContentProps {
  message: string;
  icon?: string;         // a full icon class, default 'sicon-shopping-bag'
  actionLabel?: string;  // the button renders only when this is set
  actionUrl?: string;    // default '/'
}

Try it live

NoContent, the empty state the engine shows for an empty category, brand list or blog category.Try this: clear the button label: the button disappears, because it renders only with a label.
Storefront canvas · ar · RTL

Your wishlist is empty

Browse offers
Controls
Any Salla icon font class.
Empty: no button.
What a theme writes
import { NoContent } from '@salla.sa/twilight-theme-engine/components/common';

export function EmptyWishlist() {
  return (
    <NoContent
      message={'Your wishlist is empty'}
      actionLabel={'Browse offers'}
      actionUrl="/offers"
    />
  );
}

Example

app/components/EmptyWishlist.tsx
import { NoContent } from '@salla.sa/twilight-theme-engine/components/common';
import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';

export function EmptyWishlist() {
  const { t } = useTranslation();
  return (
    <NoContent
      icon="sicon-heart"
      message={t('common.errors.no_wishlist')}
      actionLabel={t('common.elements.back_home')}
    />
  );
}

How it behaves

  • Markup: <div className="no-content-placeholder"> with <i className="<icon> icon">, the message in a <p> and, when actionLabel is set, an engine Link to actionUrl with the classes btn btn--outline-primary btn--rounded-full. The look comes from the theme CSS.

  • The engine shows it for an empty category or product listing, the brands page, empty blog lists and the empty cart.

  • It is lazy (code-split).

Gotchas

  • Nothing is translated for you: message and actionLabel render as given, so a hard-coded English string also appears on Arabic pages. Pass t(…) results, as the example does.

  • icon is the whole class name. icon="heart" renders an empty <i className="heart icon">; write icon="sicon-heart".

Related

ErrorPage

A full error screen with a code, a title, a message and a button home; the default router error screen uses it.

Link

An anchor that moves between store pages without reloading, adding the language (and, on localhost or the preview host, the store) to the path.

Source and docs