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