EmptyState component

The EmptyState component designed with Vue 3 and Tailwind CSS. Possibility to add an Background and show a Icon.

Basic Usage

Import and use EmptyState in your Vue components as follows:

<template>
  <EmptyState title="No projects found">
    <p>
      <a href="/">Add a new project</a> to get started.
    </p>
  </EmptyState>
</template>

<script setup>
import { EmptyState } from '@robuust-digital/vue-components/core';
</script>

No projects found

Add a new project to get started.

Props

Below are the props supported by LightSwitch, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
title	String	Required	Sets the text title for the empty state.
background	Boolean	false	Shows a styled background and align the content in the center.
icon	Object, Function	null	Specifies an icon to display above the title. @heroicons/vue can be used, or you can import your own .svg files.

Examples

Basic EmptyState

<template>
  <EmptyState title="No projects found">
    <p>
      <a href="/">Add a new project</a> to get started.
    </p>
  </EmptyState>
</template>

No projects found

Add a new project to get started.

EmptyState with a Background, Icon and Button

<template>
  <EmptyState
    title="No projects found"
    :background="true"
    :icon="FolderPlusIcon"
  >
    <p>Add a new project to get started.</p>
    <ButtonBase
      label="New project"
      color="secondary"
      :icon="PlusIcon"
      icon-left="true"
    />
  </EmptyState>
</template>

No projects found

Add a new project to get started.

CSS Customization ⚡️

To customize the emptyState styles global

:root {
  /* Available variables */
  --rvc-empty-state-border-radius: var(--rvc-base-border-radius);
  --rvc-empty-state-color: var(--color-slate-700);
  --rvc-empty-state-bg-color: var(--color-slate-50);
  --rvc-empty-state-padding-x: calc(var(--spacing) * 12);
  --rvc-empty-state-padding-y: calc(var(--spacing) * 12);
  --rvc-empty-state-title-color: var(--color-slate-900);
  --rvc-empty-state-title-font-weight: var(--font-weight-medium);
  --rvc-empty-state-icon-size: calc(var(--spacing) * 10);
  --rvc-empty-state-anchor-color: var(--color-indigo-600);
  --rvc-empty-state-anchor-color-hover: var(--color-indigo-800);
  --rvc-empty-state-font-size: var(--rvc-base-font-size);
  --rvc-empty-state-anchor-decoration: underline;
}