Empty state

This component is used if a component or entity view has no data to show (e.g. empty card in an overview, empty table or a entity view that has not yet been configured). It contains a headline, an illustration, one or multiple cta buttons (optional). See empty states pattern for more infos.

´ 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</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>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 {}

Types / 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

It's 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 <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>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>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 {}

Examples

Multiple items

Uses a <dt-empty-state> component with several items.

´ 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 {}

Implement a CTA card

Uses a <dt-empty-state> component in combination with a card to implement a CTA card.

´ 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 {}

Implement a CTA card (multiple items)

Uses a <dt-empty-state> component with multiple items in combination with a card to implement a CTA card.

´ 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 {}