Empty State
A component to display a responsive, empty state with optional information and action items.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-empty-stateCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Title
Title text will be output into an <h2> element:
<ts-empty-state title="No ad impressions, yet."></ts-empty-state>Description
Any descriptive content can be passed in as the component content:
<ts-empty-state>
<p>
There aren't any Ad Impressions within the selected reporting period and filters yet.
Please try again later or create a new <ts-link destination="#">Ad Tactic</ts-link>.
</p>
</ts-empty-state>Actions
Any calls to action can be placed inside the actions component:
<ts-empty-state>
<ts-empty-state-actions>
<ts-button theme="secondary">Button one</ts-button>
<ts-button>Button two</ts-button>
</ts-empty-state-actions>
</ts-empty-state>SVG
A custom SVG can be passed in as a template. If no SVG is passed in, a default will be used.
<ts-empty-state [svgTemplate]="mySvg"></ts-empty-state>
<ng-template #mySvg>
<svg>...</svg>
</ng-template>