Empty State Component

An empty state component with icon and actions slots.

Properties

Name	Type	Default	Description
title	string	''	The title of the empty state.
description	string	''	The description for the empty state.

Slots

Name	Description
icon	the icon slot of the empty state.
actions	the actions slot of the empty state.

CSS Parts

Name	Description
container	The root container of the empty state component a div.
icon	The container of the icon slot, a span.
content	The wrapper around heading and description, a div.
heading	The heading element, a span.
description	The description element, a p.
actions	The container of the actions slot, a div.

Check this link to learn how to use CSS parts for Empty State Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	The font family used in the empty state.
--tap-empty-state-icon-horizontal-margin	-	The horizontal margin for the icon slot.
--tap-empty-state-icon-vertical-margin	--tap-sys-spacing-6	The vertical margin for the icon slot.
--tap-empty-state-actions-horizontal-margin	-	The horizontal margin for the actions slot.
--tap-empty-state-actions-vertical-margin	--tap-sys-spacing-6	The vertical margin for the actions slot.
--tap-empty-state-content-horizontal-padding	--tap-sys-spacing-6	The horizontal padding for the content slot.
--tap-empty-state-content-vertical-padding	--tap-sys-spacing-4	The vertical padding for the content slot.
--tap-empty-state-title-font-size	--tap-sys-typography-headline-sm-size	The font size used for the title in the empty state.
--tap-empty-state-title-font-weight	--tap-sys-typography-headline-sm-weight	The font weight used for the title in the empty state.
--tap-empty-state-title-line-height	--tap-sys-typography-headline-sm-height	The line height used for the title in the empty state.
--tap-empty-state-description-font-size	--tap-sys-typography-headline-sm-size	The font size used for the description in the empty state.
--tap-empty-state-description-font-weight	--tap-sys-typography-headline-sm-size	The font weight used for the description in the empty state.
--tap-empty-state-description-line-height	--tap-sys-typography-headline-sm-size	The line height used for the description in the empty state.
--tap-empty-state-description-color	--tap-sys-typography-headline-sm-size	The color used for the description in the empty state.
--tap-empty-state-description-top-margin	--tap-sys-spacing-4	The top margin used for the description in the empty state.