Action Bar

A responsive container for grouping a set of actions.

Import#

import { ActionBar } from '@volue/wave-react';

Action Bar is a compound component that consists of multiple parts.

ActionBar.Root: A container for all the parts of the action bar.
ActionBar.Button: A button for a single action.
ActionBar.Separator: A visual line between items in the toolbar.

Examples#

Basic#

Use an action bar to render row of buttons that form responsive, toolbar-like component. Buttons can be split into groups by adding an ActionBar.Separator. When there is no space to render all elements, overflowing actions will be moved to Menu component with ... trigger, signaling that there are more actions available. Clicking on the trigger opens a menu with the remaining actions that didn't fit in the available space.

Resize preview box below to notice responsive behavior of the component. Resizing the action bar updates the overflow menu.

Sizes#

Action bar can be used in two sizes: medium (default) and small.

Separators#

Related buttons can be grouped with help of ActionBar.Separator . Separators from the action bar are preserved in the overflow menu.

Buttons#

Buttons are the only controls allowed in an action bar.

ActionBar.Button implements Button so it accepts same set of variants.

Action bar can contain icon-only buttons as well as buttons with text labels and optional icons.

Buttons should default to the outline or ghost variant. Mixing variants within the same action bar is not recommended.

Provide aria-label that describes the action when using icon-only buttons. When hovering over a button, a tooltip with action description will appear.

You can control the label of ... Menu button by setting moreMenuLabel prop.

Buttons in action bar are used for triggering actions. Consider using a toggle button group control when a button should have a selected state.

With dialog#

ActionBar.Button can open new context via dialogs. Use onClick handler of the button to control open state of Dialog.

You may use the danger button variant for destructive actions.

Alignment#

Use alignItems prop to control alignment of the action bar items.

Layout#

Action bar can be used full width taking up the entire space or inline next to other content.

Fixed actions#

You can use Flex layout to combine action bar with important, primary action(s) that should not overflow.

Minimum number of items in menu#

By default, minimum number of items in the overflow menu is set to 2. You can change this value by setting minItemsInMoreMenu prop.

Toolbar with many items#

Accessibility#

Action bar has an ARIA role of toolbar.
Action bar has a single tab stop. Focus movement is managed using roving focus technique when using a keyboard to navigate.

API Reference#

ActionBar.Root#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`
`alignItems`	`enum`	`"start"`
`minItemsInMoreMenu`	`number`	`2`
`moreMenuLabel`	`string`	`"More"`

ActionBar.Button#

See Button props with exception of size.

ActionBar.Separator#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value