Empty State

Show 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 img="/assets/img/empty-states/welcome.svg" 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 name="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 img="/assets/img/empty-states/welcome.svg" 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 name="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 img="/assets/img/empty-states/welcome.svg" 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 name="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 img="/assets/img/empty-states/tfl.svg" headline="Create your first tables and figures" description="Get started by creating your first table or figure" img-height="200" img-width="150" 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 img="/assets/img/empty-states/tfl.svg" headline="Create your first tables and figures" description="Get started by creating your first table or figure" imgHeight={200} imgWidth={150} 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 img="/assets/img/empty-states/tfl.svg" headline="Create your first tables and figures" description="Get started by creating your first table or figure" img-height="200" img-width="150" 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 size="lg" img="/assets/img/empty-states/welcome/user-access-assignment.svg" headline="Welcome" description="This is a large empty state" img-height="300" img-width="310" >
  <div slot="actions">
    <certara-button>Get started</certara-button>
  </div>
</certara-empty-state>

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

<CertaraEmptyState size="lg" img="/assets/img/empty-states/welcome/user-access-assignment.svg" headline="Welcome" description="This is a large empty state" imgHeight={300} imgWidth={310}>
  <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 size="lg" img="/assets/img/empty-states/welcome/user-access-assignment.svg" headline="Welcome" description="This is a large empty state" img-height="300" img-width="310">
  <div slot="actions">
    <certara-button>Get started</certara-button>
  </div>
</certara-empty-state>

certara-empty-state

Properties

description

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

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Outputs header as h1 (large) h3(default)

horizontal

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

img

Attribute	img
Type	string
Default	'welcome'
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.

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	'md'
Required	false
Description	Outputs the .empty-state__title as an h1

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. Outputs as h1 (large) h3(default).