Empty State

Used to represent a empty section of page.

Design

Code

Usage

<nile-empty-state>
</nile-empty-state>

Flat Variant

Action

<nile-empty-state variant="flat" text="Flat variant" subText="Flat Variant Subtext">
    <nile-button variant="primary">Action</nile-button>
</nile-empty-state>

Tonal Variant

Action

<nile-empty-state variant="tonal" text="Tonal variant" subText="Tonal Variant Subtext">
    <nile-button variant="primary">Action</nile-button>
</nile-empty-state>

Content Variant

Action

<nile-empty-state variant="content" text="Content variant" subText="Tonal Variant Subtext">
    <nile-button variant="primary">Action</nile-button>
</nile-empty-state>

Preview Spacing

Action

Properties

Name	Description	Type	Default
variant	The component's type variant.	'flat' \| 'tonal' \| 'content'	'tonal'
size	The component's size.	'sm' \| 'md' \| 'lg'	'medium'
icon	The name of the icon represented in component	Refer to nile-icon	error
grayscale	The image shown on variant='content' is grayscaled	boolean	false
text	Primary header text shown in component	String	Empty State
sub-text	Subtitle text allocated with the component	String	No Data

Slots

Name	Description
(default)	Default component footer actions (links, buttons, etc.)

Dependencies

nile-icon