Transaction Beta React-only

Open in Storybook Open in Figma

Transaction components are used to visualise all financial operations with a flexible and configurable set of components.

Transactions are rendered as HTML tables with a grid layout, therefore a Transaction must always be wrapped by a TransactionGroup.

HINT Open the examples in this article in the responsive viewer or in Playroom.

HINT The demos in later sections of this article are simplified examples utilising only the part of the component that’s being covered. Please check out the dedicated Transaction examples to see more realistic configurations.

TransactionDetail

A Transaction can contain a single TransactionDetail or any kind of content. This lets users expand and collapse such transaction, to provide them with more detailed information and opportunities for interaction.

Amounts

It is possible to show multiple main amounts, but there can be only one extra amount.

Avatar (Image and Icon)

Transactions can show either an icon or an image by using the Avatar component.

HINT This column can be hidden from all Transactions in a list via a prop in TransactionGroup.

Secondary Information

By enabling the secondary columns called titleSecondary and infoSecondary the main area of the transaction will be divided in two sections, usually this would be used to show the sender and receiver of a transfer. In smaller tiers these will collapse and the secondary part will be rendered directly underneath, with the arrow pointing down.

You can customise the displayed icon by passing either an icon name or component to titleSecondaryIcon. Using an icon component also gives you full control over the icon’s color.

Data

There are several different props that can be used to display the most important pieces of information in a Transaction. Detailed descriptions, actions should rather be displayed in a TransactionDetail or a separate page.

• title is usually the name of the other party, but it can also contain an arrow Icon to explain the transfer more verbosely.
• date in larger tiers (MD+) is displayed in a single column to the far left. Its format can be customised with largeDateFormat. Optionally, it is possible to show the year on a separate line with showYear, customisable with largeDateFormatYear.
• date in smaller tiers (SM-) is displayed underneath the title to save horizontal space. Its format can be customised with dateFormat.
• badges can be used to display categories, statuses, or even custom labels through the usage of the Badge component. There can be multiple of them, they are not truncated and they are not visible in the TransactionDetail.
• info can be used to display rather brief text like a short description, a user’s note or an account number. It can contain rich content and will be truncated if too long.
• misc can be used to display additional information, that can span over multiple lines but is not visible in TransactionDetail.

Indicators and Decorations

Indicators indicate various properties of the transactions and are not displayed in the TransactionDetail.

Furthermore, Transactions can be marked as unread and decorated with a color stripe on the left, in case Transactions from different products are combined into one list.

HINT The star button displayed within TransactionDetail needs to be configured in that component.

Disabled and Interactive

Transactions can be disabled and will be displayed as semi-transparent.

Interactive Transactions show a hover effect and rely on custom interactions. They should not contain a TransactionDetail. Instead a defaultAction or an onClick event should be used.

Actions

Transactions can utilise TransactionMenu to display an interactive MenuDropdown. In smaller tiers, the amount will be rendered underneath the title.

Additionally, Buttons can also be displayed directly. This works with or without TransactionMenu.

HINT Due to size constraints in the right area, the number of buttons should not exceed two, including the TransactionMenu itself.

Overlay DEPRECATED

Overlay contains Buttons and is displayed in MD+ viewports. Hover over the example below.

This functionality was deprecated and replaced by the TransactionMenu described in the section above.

Custom Render Functions

The slots for date and avatar (meaning Icon) can be repurposed, when necessary. We advise to generally avoid doing this, but it is supported.

TransactionGroup

As mentioned, all Transactions must be wrapped by a TransactionGroup. It may contain a header and/or a footer.

Columns

As Transactions are rendered as HTML tables, each individual data column can be controlled via properties in columns and affects each Transaction within. By default only widely used columns are shown.

Contrary, each default column can be hidden by setting show or the whole column property to false. Columns that are turned off will be ignored for the whole TransactionGroup, even if you provide those values in a contained Transaction.

Please take a look at the following example to see which columns are enabled by default.

Selectable

Transactions combine nicely with Selectable. Just wrap the TransactionGroup in Selectable and set a few props as seen in the demo below.

Sortable

TransactionGroup can also be configured to display a header with an interface to enable sorting. It does not provide sorting functionality though. In smaller tiers, the column controls will be condensed into a toolbar with a Select and two buttons to control ascending or descending order.

TransactionSection

TransactionSection is a single full-width column inside TransactionGroup. It may be used as a header that displays e.g. month and year, and even random non-header content like advertisement.