How to create a Confirmation screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with various 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 Confirmation Screen is a designated part of an application that appears after users take a specific action, such as submitting a form or making a significant decision. This screen acknowledges and confirms that the requested action has been successfully completed. The Confirmation Screen is essential for enhancing user experience by minimizing uncertainty and ensuring users receive acknowledgment for their actions.

This article offers a comprehensive guide for designers and developers, making it easy for them to seamlessly integrate a user-friendly Confirmation Screen into their applications. The smooth integration is achieved by employing design components from the Ionic Kit, built upon the robust foundation of the extensive Ionic framework library.

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 confirmation-screen blank --type=react

3. Get inside the project directory

cd confirmation-screen

4. Create page Confirmation.tsx inside src/pages and add code

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

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

export default Confirmation;

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. Add the Content component on the page

Inside the IonPage, add the IonContent component with the classes ion-padding and ion-text-center to style the content inside.

<IonContent className='ion-padding ion-text-center'>
</IonContent>

6. Adjust spacing within the Content component

Inside the IonContent component, add the div tag with the property style={{ height: '144px'}} to add some space.

<IonContent className='ion-padding ion-text-center'>
  <div style={{ height: '144px'}}></div>
</IonContent>

7. Add the Chip component and style it

Add the IonChip component with the property color='primary' to style the text inside.

<IonContent className='ion-padding ion-text-center'>
  <div style={{ height: '144px'}}></div>
  <IonChip color='primary'>Premium</IonChip>
</IonContent>

8. Place the text of the h1

Add the IonText component and place the h1 tag with the text 'Welcome to Premium'.

<IonContent className='ion-padding ion-text-center'>
  <div style={{ height: '144px'}}></div>
  <IonChip color='primary'>Premium</IonChip>
  <IonText>
    <h1>Welcome to Premium</h1>
  </IonText>
</IonContent>

9. Add another text component below the h1

Add another IonText component and set the property color='medium'. Within this component add the p tag with the class ion-padding-horizontal and place the text 'We hope you have a great time learning English' inside.

<IonContent className='ion-padding ion-text-center'>
  ...
  <IonText color='medium'>
    <p className='ion-padding-horizontal'>
      We hope you have a great time learning English
    </p>
  </IonText>
</IonContent>

10. Adjust the style

Repeat step 6 and set the property style={{ height: '112px'}}.

<IonContent className='ion-padding ion-text-center'>
  ...
  <div style={{ height: '112px'}}></div>
</IonContent>

11. Add the button at the bottom of the page content

Add the IonButton component and set the property expand as block. Place the text 'Got it!' inside.

<IonContent className='ion-padding ion-text-center'>
  ...
  <IonButton expand='block'>Got it!</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!