Barista - Empty state

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>.

<dt-empty-state>
  <dt-empty-state-item>
    <dt-empty-state-item-img>
      <img
        src="https://dt-cdn.net/images/cta-noagent-9eec611f00.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>

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.

<dt-empty-state>
  <dt-empty-state-item>
    <dt-empty-state-item-img>
      <img
        src="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
        alt="No agent"
      />
    </dt-empty-state-item-img>
    <dt-empty-state-item-title aria-level="2">
      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="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
        alt="No agent"
      />
    </dt-empty-state-item-img>
    <!-- Give the empty state item an aria-level to indicate which level of heading it represents within the page -->
    <dt-empty-state-item-title aria-level="2">
      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="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
        alt="No agent"
      />
    </dt-empty-state-item-img>
    <!-- Give the empty state item an aria-level to indicate which level of heading it represents within the page -->
    <dt-empty-state-item-title aria-level="2">
      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>

Empty state in use

The empty state is often used in combination with a card component or in an empty table or chart.

<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="https://dt-cdn.net/images/cta-noagent-9eec611f00.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>

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

<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="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
          alt="My Asset"
        />
      </dt-empty-state-item-img>
      <dt-empty-state-item-title aria-level="2">
        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="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
          alt="My Asset"
        />
      </dt-empty-state-item-img>
      <dt-empty-state-item-title aria-level="2">
        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="https://dt-cdn.net/images/cta-noagent-9eec611f00.svg"
          alt="My Asset"
        />
      </dt-empty-state-item-img>
      <dt-empty-state-item-title aria-level="2">
        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>

Custom empty state

Custom/Reusable empty states are also supported using the dtCustomEmptyState directive. The custom empty state must both extend and provide itself as a DtEmptyState.

<dt-card>
  <dt-table [dataSource]="[]">
    <ng-container dtColumnDef="host" dtColumnAlign="text">
      <dt-header-cell *dtHeaderCellDef>Host</dt-header-cell>
      <dt-cell *dtCellDef="let row">{{ row.host }}</dt-cell>
    </ng-container>
    <dt-header-row *dtHeaderRowDef="['host']"></dt-header-row>
    <dt-row *dtRowDef="let row; columns: ['host']"></dt-row>
    <dt-example-custom-empty-state
      dtCustomEmptyState
    ></dt-example-custom-empty-state>
  </dt-table>
</dt-card>