Import

import { MissingContent } from '@contentful/f36-components';
// or
import { MissingContent } from '@contentful/f36-empty-state';

Example

Basic usage

function BasicExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Filename</Table.Cell>
          <Table.Cell>Dimensions</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Pony.jpg</Table.Cell>
          <Table.Cell>160px x 300px</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cat.jpg</Table.Cell>
          <Table.Cell>
            <MissingContent label="No Dimensions available" />
          </Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Dog.jpg</Table.Cell>
          <Table.Cell>
            <MissingContent label="No Dimensions available" />
          </Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Open in Playground

Content guidelines

This component is meant to be displayed when the expected content is missing. This can be, because it is not set yet or there was an issue processing the data. Additional information like that can be handed over via a label property

Import

Example

Basic usage

Content guidelines

Help improve this page