Looking for Ionic kit for you platform?
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 Transaction History Screen is an essential feature in finance, banking, and e-commerce apps. It provides users with a detailed list of their past payments, including dates, amounts, payees, and transaction statuses. A well-designed screen ensures clarity and security, featuring filters, search functionality, and clearly categorized entries to help users quickly find and review their financial activity.
This guide will walk you through the steps to design and implement a Transaction History Screen using the Ionic Design Kit. By leveraging its reusable UI elements and the Ionic Framework, you can create a polished, easy-to-navigate, and secure transaction log that boosts transparency and user trust.
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 history blank --type=react
3. Get inside the project directory
cd history
4. Create a History page
Create page History.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const History: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default History;
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. Add page header and navigation
This block sets up the main page container and header using IonPage, which wraps the entire view. Inside it, IonHeader holds two IonToolbar sections. The first toolbar includes navigation controls: a back button IonBackButton placed at the start slot inside IonButtons, and a title defined by IonTitle. The IonButtons element uses the className="ion-padding-start" to apply Ionic’s built-in utility class for left-side padding. The icon attribute links the back button to an arrow icon, and defaultHref="#" determines the fallback URL when the browser’s history is empty.
The second toolbar contains an IonSearchbar, which provides a search input field. Although currently empty, it can be extended with event handlers or bindings later.
import { arrowBack } from "ionicons/icons";
...
<IonHeader>
<IonToolbar>
<IonButtons slot="start" className="ion-padding-start">
<IonBackButton text="" defaultHref="#" icon={arrowBack} />
</IonButtons>
<IonTitle>Transactions</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar></IonSearchbar>
</IonToolbar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
7. Structure content wrapper and filter header
The page's main content is wrapped in IonContent. Inside it, IonList defines the list structure, and lines="none" removes the default item dividers. At the top of the list, IonListHeader includes a filter chip composed of IonChip, IonIcon, and IonLabel. The outline={true} prop makes the chip visually outlined. The icon inside the chip is controlled via the icon={filter} attribute, displaying a filter icon.
A <br /> tag is used before the IonList to insert vertical spacing. This creates visual breathing room between elements without requiring additional CSS, helping separate the filter chip from surrounding content.
<IonContent>
<br />
<IonList lines="none">
<IonListHeader className="ion-padding-bottom">
<IonChip outline={true}>
<IonIcon icon={filter} />
<IonLabel>All accounts</IonLabel>
</IonChip>
</IonListHeader>
</IonList>
</IonContent>
8. Create first transaction group
The list is grouped using IonItemGroup, which allows separating items under a shared label. The group starts with IonItemDivider that uses padding classes for spacing. Inside the divider, IonLabel shows the transaction date.
Following the divider, IonItem represents an individual transaction. The arrow icon is placed at the start using slot="start", followed by an IonLabel showing the recipient’s name and a description (<p> element). IonNote is used at the end of the item to show the transaction amount in a visually distinct style.
<IonContent>
<IonList lines='none'>
<IonItemGroup>
<IonItemDivider className="ion-padding-top ion-padding-bottom">
<IonLabel>22 Apr 2025</IonLabel>
</IonItemDivider>
<IonItem>
<IonIcon slot="start" icon={arrowUp} />
<IonLabel>
Jennifer Johnson
<p>Sent</p>
</IonLabel>
<IonNote>560 EUR</IonNote>
</IonItem>
</IonItemGroup>
</IonList>
</IonContent>
9. Extend with additional transaction groups
The structure here follows the same principle as in the previous section. Each IonItemGroup wraps a set of transactions under a specific date using IonItemDivider. Transactions are rendered with IonItem, and follow the same layout: an icon at the start, name and optional description in the label, and amount in IonNote.
Each group uses the ion-padding-top and ion-padding-bottom classes on the divider to maintain spacing. Icons such as arrowUp or arrowDown differentiate between sent and received transactions visually.
<IonContent>
...
<IonList lines='none'>
<IonItemGroup>
<IonItemDivider className="ion-padding-top ion-padding-bottom">
<IonLabel>17 Apr 2025</IonLabel>
</IonItemDivider>
<IonItem>
<IonIcon slot="start" icon={arrowUp} />
<IonLabel>
Jennifer Johnson
<p>Sent</p>
</IonLabel>
<IonNote>800 EUR</IonNote>
</IonItem>
</IonItemGroup>
<IonItemGroup>
<IonItemDivider className="ion-padding-top ion-padding-bottom">
<IonLabel>10 Apr 2025</IonLabel>
</IonItemDivider>
<IonItem>
<IonIcon slot="start" icon={arrowDown} />
<IonLabel>Michael Smith</IonLabel>
<IonNote>1000 EUR</IonNote>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={arrowUp} />
<IonLabel>
Jennifer Johnson
<p>Sent</p>
</IonLabel>
<IonNote>70 EUR</IonNote>
</IonItem>
</IonItemGroup>
<IonItemGroup>
<IonItemDivider className="ion-padding-top ion-padding-bottom">
<IonLabel>8 Apr 2025</IonLabel>
</IonItemDivider>
<IonItem>
<IonIcon slot="start" icon={arrowUp} />
<IonLabel>
Jennifer Johnson<p>Sent</p>
</IonLabel>
<IonNote>500 EUR</IonNote>
</IonItem>
<IonItem>
<IonIcon slot="start" icon={arrowDown} />
<IonLabel>
Miller Johnson
</IonLabel>
<IonNote>3000 EUR</IonNote>
</IonItem>
</IonItemGroup>
</IonList>
</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!