# Empty State An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-empty-state--introduction ## Variants documented in Storybook - Empty State Type: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-empty-state--empty-state-type ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Empty State. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Empty State Type — No results found HTML: ```html

No results found

Did you mean:

``` React: ```jsx import React from 'react'; const EmptyStateExample1Demo = () => ( <> {/* Variant: Empty State - No Results Found */}

No results found

Did you mean:

); export default EmptyStateExample1Demo; ``` Angular: ```html

No results found

Did you mean:

``` ### 2. Empty State Type — No active applications HTML: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

``` React: ```jsx import React from 'react'; const EmptyStateExample2Demo = () => ( <> {/* Variant: Empty State - No Active Applications */}

inbox

No active applications

Start your application easily by clicking on the button below.

); export default EmptyStateExample2Demo; ``` Angular: ```html

inbox

No active applications

Start your application easily by clicking on the button below.

``` ### 3. Empty State Type — Coming soon HTML: ```html

rocket_launch

Coming soon

This feature is under development

``` React: ```jsx import React from 'react'; const EmptyStateExample3Demo = () => ( <> {/* Variant: Empty State - Coming Soon */}

rocket_launch

Coming soon

This feature is under development

); export default EmptyStateExample3Demo; ``` Angular: ```html

rocket_launch

Coming soon

This feature is under development

``` ### 4. Empty State Type — Could not load data HTML: ```html

error_outline

Could not load data

Last updated: 4 minutes ago

``` React: ```jsx import React from 'react'; const EmptyStateExample4Demo = () => ( <> {/* Variant: Empty State - Could Not Load Data */}

error_outline

Could not load data

Last updated: 4 minutes ago

); export default EmptyStateExample4Demo; ``` Angular: ```html

error_outline

Could not load data

Last updated: 4 minutes ago

``` ### 5. Introduction — Introduction HTML: ```html

Components

Empty State

An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display.

Implementation Showcase

Visual demonstration of various Empty State patterns for search, applications, development, and errors.

Search & Results

No results found

Did you mean:

Applications & Inboxes

inbox

No active applications

Start your application easily by clicking on the button below.

Coming Soon

rocket_launch

Coming soon

This feature is under development

Error States

error_outline

Could not load data

Last updated: 4 minutes ago

CSS Class Reference

Quickly copy layout and typography classes for Empty States.

Structural Classes

Base Container ux4g-empty-state

Icon Styling ux4g-empty-state-icon

Content Wrapper ux4g-empty-state-content

Typography Classes

Primary Title ux4g-title-l-strong

Secondary Body ux4g-body-m-default

``` React: ```jsx import React from 'react'; const EmptyStateExample5Demo = () => ( <>

Components

Empty State

An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display.

Implementation Showcase

Visual demonstration of various Empty State patterns for search, applications, development, and errors.

Search & Results

No results found

Did you mean:

Applications & Inboxes

inbox

No active applications

Start your application easily by clicking on the button below.

Coming Soon

rocket_launch

Coming soon

This feature is under development

Error States

error_outline

Could not load data

Last updated: 4 minutes ago

CSS Class Reference

Quickly copy layout and typography classes for Empty States.

{/* Structural Classes */}

Structural Classes

Base Container ux4g-empty-state

Icon Styling ux4g-empty-state-icon

Content Wrapper ux4g-empty-state-content

{/* Typography Classes */}

Typography Classes

Primary Title ux4g-title-l-strong

Secondary Body ux4g-body-m-default

); export default EmptyStateExample5Demo; ``` Angular: ```html

Components

Empty State

An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display.

Implementation Showcase

Visual demonstration of various Empty State patterns for search, applications, development, and errors.

Search & Results

No results found

Did you mean:

Applications & Inboxes

inbox

No active applications

Start your application easily by clicking on the button below.

Coming Soon

rocket_launch

Coming soon

This feature is under development

Error States

error_outline

Could not load data

Last updated: 4 minutes ago

CSS Class Reference

Quickly copy layout and typography classes for Empty States.

Structural Classes

Base Container ux4g-empty-state

Icon Styling ux4g-empty-state-icon

Content Wrapper ux4g-empty-state-content

Typography Classes

Primary Title ux4g-title-l-strong

Secondary Body ux4g-body-m-default

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.