Empty State

Design guidelines

An empty state occurs when an element has no content to display. Depending on the context, it tells the user what is missing, why it is missing, and can offer guidance on next steps or alternative actions.

Code

Framework

HTML

React

Angular

Vertical

Create tables and figures Learn about tables and figures

Toggle dark mode

<certara-empty-state headline="Create your first tables and figures" description="Get started by creating your first table or figure" img-height="200" img-width="175">
  <div slot="actions">
    <certara-button>
      <certara-icon icon="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <certara-button variant="link" href="https://help.certara.net" target="_blank" right-icon="arrow-up-right-from-square">
      Learn about tables and figures
    </certara-button>
  </div>
</certara-empty-state>

import { CertaraButton, CertaraEmptyState, CertaraIcon } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Create your first tables and figures" description="Get started by creating your first table or figure" imgHeight={200} imgWidth={175}>
  <div slot="actions">
    <CertaraButton>
      <CertaraIcon icon="plus" />
      Create tables and figures
    </CertaraButton>
    <CertaraButton variant="link" href="https://help.certara.net" target="_blank" rightIcon="arrow-up-right-from-square">
      Learn about tables and figures
    </CertaraButton>
  </div>
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Create your first tables and figures" description="Get started by creating your first table or figure" img-height="200" img-width="175">
  <div slot="actions">
    <certara-button>
      <certara-icon icon="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <certara-button variant="link" href="https://help.certara.net" target="_blank" right-icon="arrow-up-right-from-square">
      Learn about tables and figures
    </certara-button>
  </div>
</certara-empty-state>

Horizontal

Create tables and figures

Toggle dark mode

<certara-empty-state headline="Create your first tables and figures" description="Get started by creating your first table or figure" horizontal>
  <div slot="actions">
    <certara-button left-icon="plus">Create tables and figures</certara-button>
  </div>
</certara-empty-state>

import { CertaraButton, CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Create your first tables and figures" description="Get started by creating your first table or figure" horizontal>
  <div slot="actions">
    <CertaraButton leftIcon="plus">Create tables and figures</CertaraButton>
  </div>
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Create your first tables and figures" description="Get started by creating your first table or figure" horizontal>
  <div slot="actions">
    <certara-button left-icon="plus">Create tables and figures</certara-button>
  </div>
</certara-empty-state>

Large

Get started

Toggle dark mode

<certara-empty-state heading-size="lg" headline="Welcome" description="This is a large empty state">
  <div slot="actions">
    <certara-button>Get started</certara-button>
  </div>
</certara-empty-state>

import { CertaraButton, CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headingSize="lg" headline="Welcome" description="This is a large empty state">
  <div slot="actions">
    <CertaraButton>Get started</CertaraButton>
  </div>
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state heading-size="lg" headline="Welcome" description="This is a large empty state">
  <div slot="actions">
    <certara-button>Get started</certara-button>
  </div>
</certara-empty-state>

Heading size & level

Toggle dark mode

<certara-empty-state heading-size="lg" heading-level="3" headline="Large style, h3 element" description="The headline looks large, but the heading element follows heading-level.">
</certara-empty-state>

import { CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headingSize="lg" headingLevel={3} headline="Large style, h3 element" description="The headline looks large, but the heading element follows heading-level.">
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state heading-size="lg" heading-level="3" headline="Large style, h3 element" description="The headline looks large, but the heading element follows heading-level.">
</certara-empty-state>

Images

Src

Toggle dark mode

<certara-empty-state headline="Using src prop" src="/assets/img/empty-states/welcome/user-access-assignment.svg">
</certara-empty-state>

import { CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Using src prop" src="/assets/img/empty-states/welcome/user-access-assignment.svg">
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Using src prop" src="/assets/img/empty-states/welcome/user-access-assignment.svg">
</certara-empty-state>

Illustration

Set illustration to a built-in name: welcome, tfl, or dataset

Toggle dark mode

<certara-empty-state headline="Using illustration prop" illustration="tfl">
  <div slot="description-slot">
    Set
    <code>illustration</code>
    to a built-in name:
    <code>welcome</code>
    ,
    <code>tfl</code>
    , or
    <code>dataset</code>
  </div>
</certara-empty-state>

import { CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Using illustration prop" illustration="tfl">
  <div slot="description-slot">
    Set
    <code>illustration</code>
    to a built-in name:
    <code>welcome</code>
    ,
    <code>tfl</code>
    , or
    <code>dataset</code>
  </div>
</CertaraEmptyState>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Using illustration prop" illustration="tfl">
  <div slot="description-slot">
    Set
    <code>illustration</code>
    to a built-in name:
    <code>welcome</code>
    ,
    <code>tfl</code>
    , or
    <code>dataset</code>
  </div>
</certara-empty-state>

Image height

Toggle dark mode

<certara-empty-state headline="Using image dimension props" img-height="100"></certara-empty-state>

import { CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Using image dimension props" imgHeight={100} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Using image dimension props" img-height="100"></certara-empty-state>

Image width

Toggle dark mode

<certara-empty-state headline="Using image dimension props" img-width="200"></certara-empty-state>

import { CertaraEmptyState } from '@certara/certara-ui-react';

<CertaraEmptyState headline="Using image dimension props" imgWidth={200} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-empty-state headline="Using image dimension props" img-width="200"></certara-empty-state>

certara-empty-state

Properties

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Outputs text below headline

headingLevel

Attribute	heading-level
Type	1 | 2 | 3 | 4 | 5 | 6
Default	2
Required	false
Description	Heading element of the headline, from 1 to 6. Sets only the element, for the page’s document outline. Defaults to 2.

headingSize

Attribute	heading-size
Type	"lg" | "md"
Default	undefined
Required	false
Description	Visual scale of the headline. lg uses the large heading style. It doesn’t change the heading element. Defaults to 'md'.

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Text of the headline. Renders inside the heading set by headingLevel.

horizontal

Attribute	horizontal
Type	boolean
Default	false
Required	false
Description	Toggles horizontal view

illustration

Attribute	illustration
Type	"dataset" | "tfl" | "welcome"
Default	undefined
Required	false
Description	Built-in illustration, by name: 'welcome', 'tfl', or 'dataset'. Shown when src is not set. Defaults to 'welcome'.

img

Attribute	img
Type	string
Default	undefined
Required	false
Description	Image name or path. If a simple name is provided (e.g., ‘welcome’), it will be resolved to the CDN path. Full URLs or paths starting with ’/’, ’.’, or ‘http’ will be used as-is. DEPRECATED. Use illustration for a built-in name or src for a URL or path instead. Will be removed in the next major version.

imgHeight

Attribute	img-height
Type	number
Default	undefined
Required	false
Description	Height of image

imgWidth

Attribute	img-width
Type	number
Default	undefined
Required	false
Description	Width of image

size

Attribute	size
Type	"lg" | "md"
Default	undefined
Required	false
Description	Visual scale of the headline. lg uses the large heading style. It doesn’t change the heading element. DEPRECATED. Use headingSize instead. Will be removed in the next major version.

src

Attribute	src
Type	string
Default	undefined
Required	false
Description	URL or path of the image, used as-is with no prefix checks. When set, it takes priority over illustration.

width

Attribute	width
Type	string
Default	undefined
Required	false
Description	Optional width of the empty state. Accepts a value of 30rem, 370px, or any valid CSS size value.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
actions	Buttons, links, more content
description-slot	HTML slot for the description. Outputs text below headline.
headline-slot	HTML slot for the headline. Renders inside the heading set by headingLevel.

An empty state occurs when an element has no content to display. Depending on the context, it tells the user what is missing, why it is missing, and can offer guidance on next steps or alternative actions.

Design guidelines

Variants

Vertical

Create tables and figures Learn about tables and figures

Toggle dark mode

Horizontal

Create tables and figures

Toggle dark mode

List

"dad" is not here

Check your spelling

Try different keywords

Try using fewer words

Primary Learn more

Toggle dark mode

Full page

Helpful alternative information. Try this in the meantime

Toggle dark mode

In practice

• Display empty states in the space where the content would otherwise be shown.
• Can apply to full pages, page sections, cards, dashboards, tables, and side panels.
• Empty states can include:
• Image
• Title
• Description
• Buttons
• Links
• The size of the image is relative to the size of the container.
• If the container is very small, limit the empty state to text only.

When to use

Empty states can be caused by a variety of reasons. Some include:

• No data existing due to first time use of a feature.
• Access issues dues to permissions or other system configurations.
• User actions like search or filtering that returns no results, or the successful completion of a workflow.

Content guidelines

Empty states should be helpful and engaging for the user.

Title

• Clearly explain the reason for the empty state.
• Use positive or neutral language.

Description

• Let the user know what action, if any, they can take.
• Add further explanation for the empty state if necessary.

Button and links

• Labels should match the action described in the description.

Accessibility

• Images used on empty states do not need to be recognized by screen readers and other assistive technologies.
• Choose the title’s heading level to fit the page outline. heading-size changes how the title looks, not its heading level.
• For more information, see our accessibility guidelines.

Design resources

Illustrations can be downloaded in our image resources.

View component in Figma