Empty state

The empty state is used if a component or entity view has no data to show.

The <dt-empty-state> component is a placeholder for content that does not yet exist. It consists of one or more items with each item containing an image, an optional header and a short description text. It can be used within a <dt-card> or an <dt-table>.

´ Loading interactive demo...
<dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title aria-level="2" >Optional Heading</dt-empty-state-item-title > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> export class EmptyStateDefaultExample {} <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title aria-level="2" >Optional Heading</dt-empty-state-item-title > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> export class EmptyStateDefaultExample {}

To set the content for a empty state component, the following tags are available:

  • <dt-empty-state-item> - An empty state item - an empty state card may contain one or more such items
  • <dt-empty-state-item-img> - The image of an empty state card item
  • <dt-empty-state-item-title> - The (optional) heading of an empty state card item

Imports

You have to import the DtEmptyStateModule when you want to use the <dt-empty-state>:

@NgModule({
  imports: [DtEmptyStateModule],
})
class MyModule {}

Variants

If multiple steps are needed in an explanation, they will be seperated with an arrow. If a main call to action button is needed, add it to the card component. This is mainly used in an empty entity view.

´ Loading interactive demo...
<dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 1 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 2 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 3 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> export class EmptyStateMultipleItemsExample {} <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 1 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 2 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="No agent" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional Heading 3 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> export class EmptyStateMultipleItemsExample {}

Empty state in use

The empty state is often used in combination with a card component (replaces the deprecated cta card) or in a empty table or chart.

´ Loading interactive demo...
<dt-card> <dt-card-title> Start monitoring your Cloud Foundry foundation VMs </dt-card-title> <dt-card-title-actions> <button dt-icon-button variant="secondary" color="cta" aria-label="Close card" > <dt-icon name="abort"></dt-icon> </button> </dt-card-title-actions> <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta" i18n>Read more...</a> <dt-empty-state-footer-actions> <a dt-button color="cta" i18n>View release</a> <a dt-button color="cta" i18n>More info</a> </dt-empty-state-footer-actions> </dt-empty-state-item> </dt-empty-state> </dt-card> export class EmptyStateInCardExample {} <dt-card> <dt-card-title> Start monitoring your Cloud Foundry foundation VMs </dt-card-title> <dt-card-title-actions> <button dt-icon-button variant="secondary" color="cta" aria-label="Close card" > <dt-icon name="abort"></dt-icon> </button> </dt-card-title-actions> <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> Deploy Dynatrace OneAgent via the Dynatrace OneAgent BOSH release to your Cloud Foundry foundation VMs. Get monitoring insights into all Cloud Foundry components including Diego cells, Gorouters, and more. Benefit from automatic monitoring of Cloud Foundry applications, down to the code and query level, thanks to built-in auto-injection for Garden-runC containers. <a class="dt-link" color="cta" i18n>Read more...</a> <dt-empty-state-footer-actions> <a dt-button color="cta" i18n>View release</a> <a dt-button color="cta" i18n>More info</a> </dt-empty-state-footer-actions> </dt-empty-state-item> </dt-empty-state> </dt-card> export class EmptyStateInCardExample {}

The following example shows a CTA card with multiple empty state items.

´ Loading interactive demo...
<dt-card> <dt-card-title>CTA card title</dt-card-title> <dt-card-title-actions> <button dt-icon-button variant="secondary" color="cta" aria-label="Close card" > <dt-icon name="abort"></dt-icon> </button> </dt-card-title-actions> <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 1 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 2 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 3 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> <dt-card-footer-actions> <a dt-button color="cta" i18n>View release</a> <a dt-button color="cta" i18n>More info</a> </dt-card-footer-actions> </dt-card> export class EmptyStateMultipleItemsInCardExample {} <dt-card> <dt-card-title>CTA card title</dt-card-title> <dt-card-title-actions> <button dt-icon-button variant="secondary" color="cta" aria-label="Close card" > <dt-icon name="abort"></dt-icon> </button> </dt-card-title-actions> <dt-empty-state> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 1 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 2 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> <dt-empty-state-item> <dt-empty-state-item-img> <img src="/assets/cta-noagent.svg" alt="My Asset" /> </dt-empty-state-item-img> <dt-empty-state-item-title> Optional heading 3 </dt-empty-state-item-title> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </dt-empty-state-item> </dt-empty-state> <dt-card-footer-actions> <a dt-button color="cta" i18n>View release</a> <a dt-button color="cta" i18n>More info</a> </dt-card-footer-actions> </dt-card> export class EmptyStateMultipleItemsInCardExample {}