MissingContent

Import

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

Example

Basic usage

Hide code
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>
  );
}
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