Action bar is a set of buttons that allows users to edit, filter etc. An action bar is always used above a table or a thumbnail view.

Component Status

Design Kit: RELEASED

Bobwai component: bobwai--action-buttons RELEASED

Content Overview

Usage

The action bar is used for key actions that impact the entire table or each row. The action bar can be customized by adding or removing icon buttons based on specific user needs.

Typical actions are, for example: Create, Edit, Paste, Upload, Import, Rename, Move, Clone, Download.

Sort actions in order of importance from left to right, depending on the culture.

Do not use for simple tables, when there is no need to use global or contextual actions for the table.

Anatomy

Global button (optional) - Contains primary app-specific actions for each use case.
Contextual buttons (optional) - Actions related to the selected table/thumbnail item.
Selection status (optional) - Informs users about the selected items.
Filter (optional) - Text field for basic filtering.
Utility buttons (optional) - Allow using table-related tools/actions.

Global Button

Action that does not depend on the selected line. The global action button can have a dropdown with menu which contains primary app-specific actions, typically Create or Add actions. All buttons should have an icon and a label.

Contextual Buttons

Actions related to the selected table/thumbnail item. The contextual buttons can have a dropdown with menu. All buttons should have an icon and a label. Organize buttons into logical groupings.

Standard action buttons. It is recommended to display no more than 5-7 actions.

Contextual buttons can have a dropdown with menu which adopt the menu style.

Overflow Menu

The overflow menu is used to display a list of multiple controls when horizontal space for the toolbar becomes restricted. Use overflow for less frequently used actions.

Selection Status

Status informs users about the currently selected items.

Filter

Users can trim the content of a table by typing a keyword in the text field. For advanced filtering use an advanced filter and position it above the action bar.

Utility Buttons

Utility buttons contain controls including view switch and enable users to use the detail panel.

Appearance

The width of the Action lbar is 100% of the width of the table.

Responsivity

The action bar flexes in size to adapt to the view size.

Fluid layout in a constrained space behaves in the following steps:

Buttons hide in the overflow menu.
Text of buttons hides and only icons remain.
The rest of the buttons hide in the overflow menu.

Behavior

States

The action bar includes a series of actions that adopt the toolbar button style. The action buttons typically have five different states: enabled, hover, focus, active, and disabled.

Disabled

Cannot be interacted with but remains visible to the user in a disabled visual style. Should be accompanied with an explanation and help in a tooltip on hover.

Keyboard Interactions

Key	Interaction
<Tab> and <Shift> + <Tab>	Tab keys allow moving focus in and out of the toolbar..
<Left Arrow>	Moves focus to the previous control.
<Right Arrow>	Moves focus to the next control.
<Up Arrow> and <Down Arrow>	Navigate to different options within the menu.
<Enter>	Opens the menu and confirms the select item.
<Esc>	Closes the menu.

Editorial

Use the title case for action buttons.
Use the sentence case for selection info.

Related Components

Table: bobwai–table - Tables are used to organize and display data efficiently using rows and columns.
Advanced filter: bobwai--advanced-filter - Advanced filter allows a user to add or remove data items from a displayed data set.

Style

Elements

Used in	Type	Token
Background (possible values)	Color	none, color-bg-ui-100, color-bg-ui-200
Separator	Color	color-border-200
Separator	Width	border-width-200
Borders	Color	color-border-200
Borders	Width	border-width-200

Spacing

Medium

Used in	Type	px	Token
Group spacing	spacing	4	spacing-200
Separator	spacing	2	spacing-100
Item gutter (space between items)	spacing	2	spacing-100

Small

Used in	Type	px	Token
Group spacing	spacing	2	spacing-100
Separator	spacing	2	spacing-100
Item gutter (space between items)	spacing	2	spacing-100

Accessibility

Guidance for Design pattern for toolbar

Inspire Design System : Action Bar