Action Bar

Pattern

The Action Bar pattern is a user interface element typically located at the top of a digital interface, providing users with quick access to essential actions, commands, or controls relevant to the current context or task.

It serves as a centralized hub for primary actions, enabling users to efficiently interact with the interface and easily perform key tasks. The Action Bar often contains icons and buttons. By presenting the essential functionalities needed per view, it increases user productivity, makes tasks easier and contributes to a smooth and intuitive user experience.

A: Desktop Variation

B: Tablet Variation

C: Mobile Variation

1: Split Button

2: Button

3: Icon Button

4: Loading Button

5: Error Icon

6: Pagination

Demo

Access the Figma file and inspect the element using Dev Mode.

Last Update

• Added loading button;
• Added error notification icon;
• Added pattern guidelines;

Behavior

Devices

Depending on the screen, certain variations have been created to be applied. There are three variations that have been created for each device and breakpoint, namely: Desktop, Tablet and Mobile. For each of these variations, the number of buttons changes:

• Desktop: two split buttons, one button, one button icon and one overflow menu;
• Tablet: one split button, one button and one overflow menu;
• Mobile: one split button and one overflow menu.

Keep in mind that depending on the needs of each product, the split or regular buttons can be swapped, but the overall number of elements should remain the same. Additionally, keep in mind that this Action Bar must be applied within the Page Title guidelines as well.

Pagination

In the case of the Desktop variation, a pagination can be inserted next to the Action Bar to quickly navigate between pages within the same context (e.g. data grid with filtered data, list of clients in the same country).

Position

The Action Bar pattern ensures the Action Bar is consistently positioned at the top of the page, just below the topbar.

This guideline enhances usability by maintaining a predictable location for primary actions, improving user navigation and efficiency. By keeping the Action Bar at the top, users can quickly access important functions without unnecessary scrolling, contributing to a seamless and intuitive user experience.

This positioning is also in line with common user expectations, since Action Bars at the top of the page are a standard in many interfaces.

Hierarchy

By default, the primary action appears first as a button or split button in the primary variation, ensuring high visibility for key tasks.

Then follows a secondary action, usually presented as a primary gray button or a split button in a secondary variation for less critical but still important actions.

Supporting actions are placed next using tertiary button icons, providing quick access to additional functions without overwhelming the interface.

Finally, any remaining actions are consolidated into an overflow menu, maintaining a clean and organized layout while ensuring all options remain accessible.

States

Loading

The loading state offers clear feedback during ongoing processes initiated through the Action Bar. For example, when users trigger actions like saving, uploading, or processing data, the loading state visually communicates that the system is actively working.

This prevents users from repeating actions due to perceived inactivity, reducing errors and improving efficiency.

Error

The error state is represented by a simple icon in the Action Bar, serving as a visual cue to indicate the presence of errors on the page. Instead of detailing specific issues in the Action Bar itself, this state directs users to inspect the page for additional error information.

Its minimalistic design ensures the Action Bar remains uncluttered while still signaling the need for attention.

---

Variations

Desktop

.desktop {
  spacement: var(--spacing-16);
  spacementBtns: var(--spacing-8);
  BtnSize: var(--regular);
  height: 36px;
}

Tablet

.tablet {
  spacement: var(--spacing-8);
  spacementBtns: var(--spacing-8);
  BtnSize: var(--regular);
  height: 36px;
}

Mobile

.mobile {
  spacement: var(--spacing-8);
  spacementBtns: var(--spacing-8);
  BtnSize: var(--regular);
  height: 36px;
}