NoContent

Displays a centered empty-state view with an icon above a short message. Typically used inside lists, tables, or panels when there is no data to show. The icon supports both named icons from the library and custom SVG paths.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | message | string | Yes | — | Text displayed below the icon. | | icon | string | No | — | Icon name from the built-in library. | | iconPaths | any[] | No | — | Custom SVG path definitions for the icon. | | iconSize | number | No | 60 | Size of the icon in pixels. | | iconColor | string | No | theme textLight | Color of the icon. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | iconStyle | React.CSSProperties | No | — | Inline styles applied to the icon. | | messageStyle | React.CSSProperties | No | — | Inline styles applied to the message paragraph. |

Usage

Basic

import NoContent from '@/components/NoContent';

export default function Example() {
  return (
    <NoContent
      icon="records"
      message="No products found."
    />
  );
}

Custom icon color and size

import NoContent from '@/components/NoContent';

export default function Example() {
  return (
    <NoContent
      icon="search"
      iconSize={80}
      iconColor="#bdc3c7"
      message="No results match your search."
      messageStyle={{ fontSize: 18, color: '#7f8c8d' }}
    />
  );
}