Empty

Used to indicate when a resource is empty or unavailable.

Demo

React

VariantNeutralPrimarySecondarySuccessWarningDanger

Welcome back

You are logged in as John Doe.

Vue

VariantNeutralPrimarySecondarySuccessWarningDanger

Welcome back

You are logged in as John Doe.

Usage

React

import { Empty } from '@fintech-sandpit/ui/react';
import { faBoxOpen } from '@fortawesome/free-solid-svg-icons';

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

Vue

<script setup lang="ts">
import { Empty } from '@fintech-sandpit/ui/vue';
import { faBoxOpen } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Empty
    icon={faBoxOpen}
    color-scheme="primary"
    heading="No projects found"
    description="Try another search or create a new project."
  />
</template>

Props

React

Name	Type	Required	Default	Description
icon	IconDefinition		faCircleInfo	The icon to display in the empty state 1
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

Vue

Name	Type	Required	Default	Description
icon	IconDefinition		faCircleInfo	The icon to display in the empty state 1
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

1. See Icons for the list of available icon definitions.

Slots

Slot name	Description
default	A custom content for the heading and description