How to create an Empty state screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Empty State Screen is an important UI element that appears when there is no data to display — for example, when a user has no saved items, messages, or recent activity. A well-designed empty state uses a friendly message, an engaging icon or illustration, and a clear call-to-action (CTA) button to guide users toward the next step, whether that’s adding new content, refreshing the page, or exploring features. This approach helps maintain engagement even in the absence of data.

This guide will walk you through the steps to design and implement an Empty State Screen using the Ionic Design Kit. By leveraging its ready-made UI components and the Ionic Framework, you can create an approachable, visually appealing, and action-oriented screen that turns “nothing to show” into a helpful and positive user experience.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start notifications blank --type=react

3. Get inside the project directory

cd notifications

4. Create a Notifications page

Create page Notifications.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const Notifications: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Notifications;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Set up page and header

The IonPage component wraps the entire view. Inside it, IonHeader and IonToolbar define the top section. IonButtons with slot='start' places the IonBackButton on the left, using defaultHref='/' for navigation and a custom icon. IonTitle displays the page title "Notifications". On the right, IonButtons with slot='end' contains a button with a IonIcon for settings.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='/' text='' icon={arrowBack} />
        </IonButtons>
        <IonTitle>
            Notifications
        </IonTitle>
        <IonButtons slot='end' className='ion-padding-end'>
            <IonButton>
                <IonIcon icon={settingsOutline} />
            </IonButton>
        </IonButtons>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

7. Show image section

IonContent defines the main scrollable area of the screen. It uses padding and center-aligned text with the classes ion-padding and ion-text-center. Inside it, IonImg displays an image of a bell with src='bell.png'. Inline styles add top and bottom margins for spacing.

...
<IonContent className='ion-padding ion-text-center'>
    <IonImg src='bell.png' alt='bell image' style={{marginTop: '60px', marginBottom: '36px'}} />
</IonContent>

8. Display empty state message

A <h1> tag shows the message 'No notifications yet' to indicate that there are currently no alerts. Below it, a <p> tag provides additional information that notifications will appear once received.

<IonContent className='ion-padding ion-text-center'>
    ...
    <h1>
        No notifications yet
    </h1>
    <p>
        Your notifications will appear here once you've received them.
    </p>
</IonContent>

9. Add notification button

An IonButton is placed below the text with expand='block' to make it full width. The color="secondary" sets its theme color, and the class ion-padding-top adds spacing above the button. The label 'Manage notifications' invites the user to adjust notification settings.

<IonContent className='ion-padding ion-text-center'>
    ...
    <IonButton expand='block' color="secondary" className='ion-padding-top'>
        Manage notifications
    </IonButton>
</IonContent>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!