Empty

Used to indicate when a resource is empty or unavailable.

Demo

React
Vue

Variant

Welcome back

You are logged in as John Doe.

Example

React
Vue

// Import component
import {
  Empty,
  Icon,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/empty.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faBoxOpen } from '@fortawesome/free-solid-svg-icons';

return (
  <Empty
    colorScheme="primary"
    heading="No projects found"
    description="Try another search or create a new project."
  >
    <Icon
      as={faBoxOpen}
      boxSize="3rem"
      colorScheme="primary"
    />
  </Empty>
);

<script setup lang="ts">
// Import component
import {
  Empty,
  Icon,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/empty.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faBoxOpen } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Empty
    color-scheme="primary"
    heading="No projects found"
    description="Try another search or create a new project."
  >
    <Icon
      :as="faBoxOpen"
      box-size="3rem"
    />
  </Empty>
</template>

Props

React
Vue

Name	Type	Default	Description
`iconBoxSize`	`CssUnit`	`3rem`	The size of the icon
`colorScheme`	`ColorScheme`	`neutral`	The color scheme of the empty state
`heading`	`string`		The heading text
`description`	`string`		The description text

Name	Type	Default	Description
`icon-box-size`	`CssUnit`	`3rem`	The size of the icon
`color-scheme`	`ColorScheme`	`neutral`	The color scheme of the empty state
`heading`	`string`		The heading text
`description`	`string`		The description text

Slots

Slot name	Description
`default`	A custom content, including the icon, and, optionally, heading and description