Empty State

Show design guidelines

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" >
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <certara-button variant="link" href="https://help.certara.net" target="_blank">
      Learn about tables and figures
      <certara-icon name="arrow-up-right-from-square"></certara-icon>
    </certara-button>
  </span>
</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}>
  <span slot="actions">
    <CertaraButton color="brand">
      <CertaraIcon name="plus" />
      Create tables and figures
    </CertaraButton>
    <CertaraButton variant="link" href="https://help.certara.net" target="_blank">
      Learn about tables and figures
      <CertaraIcon name="arrow-up-right-from-square" />
    </CertaraButton>
  </span>
</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">
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
    <certara-button variant="link" href="https://help.certara.net" target="_blank">
      Learn about tables and figures
      <certara-icon name="arrow-up-right-from-square"></certara-icon>
    </certara-button>
  </span>
</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 >
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon variant="solid" name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
  </span>
</certara-empty-state>

import { CertaraButton, CertaraEmptyState, CertaraIcon } 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>
  <span slot="actions">
    <CertaraButton color="brand">
      <CertaraIcon variant="solid" name="plus" />
      Create tables and figures
    </CertaraButton>
  </span>
</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>
  <span slot="actions">
    <certara-button color="brand">
      <certara-icon variant="solid" name="plus"></certara-icon>
      Create tables and figures
    </certara-button>
  </span>
</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" >
  <span slot="actions">
    <certara-button color="brand">Get started</certara-button>
  </span>
</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}>
  <span slot="actions">
    <CertaraButton color="brand">Get started</CertaraButton>
  </span>
</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">
  <span slot="actions">
    <certara-button color="brand">Get started</certara-button>
  </span>
</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).