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

Parts

Name	Description
container	Outer wrapper of the empty‑state component
body	Main content area inside the container
content-image	Wrapper for the image region in the “content” variant
image	The element displaying the (possibly grayscale) image
icon-wrapper	Container around the nile-icon in the content or flat variant
tonal-body	Wrapper for the icon in the “tonal” variant
flat-body	Wrapper for the icon in the “flat” variant
text-section	Container holding the title and subtitle texts
text	The main heading text of the empty state
subtitle	The subheading or descriptive text
actions	Slot container for action buttons or links

Dependencies

nile-icon