Agnostic

Empty States

The EmptyState component (also known as: zero state, first-time-user-experience, or blank state) is used when a table, list, search result, etc., has no data to be displayed. This often occurs during the first use of a product or feature, and provides an opportunity to communicate its benefits and guidance on what to do next.

Examples

No connections yet

Click below to add some friends

No connections yet

Click below to add some friends

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import {
  EmptyState,
  EmptyStateHeader,
  EmptyStateBody,
  EmptyStateFooter,
  Button
} from "agnostic-react";
export const YourComponent = () => (
  <>
    <EmptyState isBordered isRounded>
      <EmptyStateHeader>
        <svg xmlns="http://www.w3.org/2000/svg" fill="#999" width="40" height="40" viewBox="0 0 24 24">
          <path fillRule="evenodd" d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z" />
        </svg>
      </EmptyStateHeader>
      <EmptyStateBody>
        <div className="h4">No connections yet</div>
        <p className="mbe16">Click below to add some friends</p>
      </EmptyStateBody>
      <EmptyStateFooter>
        <Button mode="primary" isRounded>Invite friends</Button>
      </EmptyStateFooter>
    </EmptyState>
  </>
)

React: component source, storybook tests

Vue 3 logoVue 3

View source
<template>
  <EmptyState
    isRounded
    isBordered
  >
    <template #header>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="#999"
        width="40"
        height="40"
        viewBox="0 0 24 24"
      >
        <path
          fill-rule="evenodd"
          d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z"
        />
      </svg>
    </template>
    <template #body>
      <div class="h4">
        No connections yet
      </div>
      <p
        class="mbe16"
        style="color: var(--agnostic-gray-dark);"
      >
        Click below to add some friends
      </p>
    </template>
    <template #footer>
      <Button
        isRounded
        mode="primary"
      >Invite friend</Button>
    </template>
  </EmptyState>
</template>
<script setup>
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Button, EmptyState } from "agnostic-vue";
</script>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Button, EmptyState } from "agnostic-svelte";
</script>
<div>
   <EmptyState>
      <div slot="header">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="#999"
          width="40"
          height="40"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z"
          />
        </svg>
      </div>
      <div slot="body">
        <div class="h4">
          No connections yet
        </div>
        <p
          class="mbe16"
          style="color: var(--agnostic-gray-dark);"
        >
          Click below to add some friends
        </p>
      </div>
      <div slot="footer">
        <Button mode="primary">
          Invite friend
        </Button>
      </div>
    </EmptyState>
</div>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<div>
    <ag-empty-state [isRounded]="true"
                    [isBordered]="true">
      <ag-empty-state-header>
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="#999"
             width="40"
             height="40"
             viewBox="0 0 24 24">
          <path fillRule="evenodd"
                d="M12 2.5a5.5 5.5 0 00-3.096 10.047 9.005 9.005 0 00-5.9 8.18.75.75 0 001.5.045 7.5 7.5 0 0114.993 0 .75.75 0 101.499-.044 9.005 9.005 0 00-5.9-8.181A5.5 5.5 0 0012 2.5zM8 8a4 4 0 118 0 4 4 0 01-8 0z" />
        </svg>
      </ag-empty-state-header>
      <ag-empty-state-body>
        <div class="h4">No connections yet</div>
        <p class="mbe16">Click below to add some friends</p>
      </ag-empty-state-body>
      <ag-empty-state-footer>
        <ag-button [isRounded]="true"
                   mode="primary">Invite friends</ag-button>
      </ag-empty-state-footer>
    </ag-empty-state> 
  </div>`
})
export class YourComponent {}

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.