FREE SALESFORCE LWC COMPONENT

Empty State

An empty state should explain what happened and give the user a useful next action when one exists.

Component structure

COMPONENTwcsEmptyState

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <section class="empty-state">
    <h2>No projects yet</h2>
    <p>Create your first project to get started.</p>
    <lightning-button variant="brand" label="Create project"></lightning-button>
  </section>
</template>

JavaScript

import { LightningElement } from 'lwc';

export default class WcsEmptyState extends LightningElement {}

CSS

.empty-state{text-align:center;padding:2rem;border:1px dashed #c9c9c9;border-radius:.25rem}.empty-state h2{margin:0 0 .5rem;font-size:1.1rem}.empty-state p{color:#5f6b7a;margin:0 0 1rem}

Meta XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>