Action Bar

Anatomy

1. Primary Button: A button that is discoverable and used as the most important action to take on a page.
2. Secondary Button: A button or set of buttons that is less important than the Primary Button.
3. Overflow Menu: An Icon-Only Secondary Button Variant with an Ellipsis Icon used for responsive screens or small page width to show more actions.
4. Container Bar: The Container Bar is used to house action buttons and is anchored at the bottom of the screen.

Usage Guidance

• Primary Buttons should only be used once per screen. If there are other buttons on screen, use the Secondary or Tertiary Buttons. However, Tertiary Buttons should not be on the Action Bar unless it's in the Overflow Menu.
• Action Bars are placed at the bottom of the screen, and will stick as the user scrolls.
• Although actions may change, the placement of the Action Bar should persist until the task is successfully submitted.
• Action Bars can contain up to 3 actions and an Overflow Menu when appropriate.
• If there are more than 3 actions, hide the 4th and other remaining actions in an Overflow Menu that is launched by clicking the Icon Only Secondary Button Variant.
• There should be between 1-7 items to choose from in an Overflow Menu.
• Buttons placed in Action Bars should be grouped logically, either by usage or importance.

When to Use

• Use Action Bars for tasks that require navigating between pages, saving progress, submitting a task, or cancelling a task.

When to Use Something Else

• Consider taking a Button outside of the Action Bar if the action is not related to the progress or status of a task.
• Consider using a Text Button instead of an Action Bar if an action is less popular or less important.

Examples

Basic Example

ActionBar includes a container ActionBar component and the following subcomponent: ActionBar.List which should contains ActionBar.Item.

In a basic example of an ActionBar there are two buttons. The primary action button should be used only once and left aligned if content is left to right, followed by secondary buttons. Tertiary buttons should not be used in the Action Bar.

Icons Example

ActionBar.Item renders a SecondaryButton as default, so it's possible to use other Button props with ActionBar.Item such as icon or size.

Delete Action Example

ActionBar.Item is a SecondaryButton by default but it's posible to change it to another element, such as DeleteButton, by using as prop.

Overflow Example

ActionBar container can contain up to 3 actions and an Overflow Menu if there are more than 3 actions, the other remaining actions should be placed into an Overflow Menu that is launched by clicking the Overflow Button.

Also, ActionBar is a responsive component based on the width of its container. If the rendered actions exceed the width of the ActionBar.List, an overflow menu will be rendered. This only works against the dynamic API where you give the ActionBarModel an array of items to be rendered. The dynamic API handles the React key for you based on the item's identifier. The dynamic API requires either an id on each item object or a getId function that returns an identifier based on the item. The below example uses an id property on each item.

The dynamic API takes in any object, but since nothing is known about your object, a render prop is necessary to instruct a list how it should render.

The number of visible buttons can also be adjusted by using the model's maximumVisible attribute. You can change it from the default of 3 to any number greater than 1 and less than items.length.

Component API

<ActionBar items={[]}>{Child components}</ActionBar>

const model = useActionBarModel({
  items: [],
});

<ActionBar model={model}>{Child components}</ActionBar>;

// without overflow
<ActionBar.List>{ActionBar.Items}</ActionBar.List>

// with overflow
<ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions"/>}>
  {ActionBar.Items}
</ActionBar.List>

import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

return (
 <Element
   {...mergeStyles(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)

<ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
  First Action
</ActionBar.Item>

<ActionBar.Item>First Action</ActionBar.Item>

import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

return (
 <Element
   {...mergeStyles(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)

Menu

Accessibility Guidelines

Keyboard Interaction

Each Button in the Action Bar must have a focus indicator that is highly visible against the background and against the non-focused state. Refer to Accessible Colors for more information.

Action Bar must support the following keyboard interactions:

• Tab: focus each Button element in the Action Bar
• Enter or Space: activate focused Button element
• Esc: dismiss overflow menu of the action bar (if applicable)
• [With overflow] Up Arrow or Down Arrow: navigates among the overflow menu items

Screen Reader Interaction

Action Bar must communicate the following to users:

• The accessible name for each button in the action bar
• The “more actions” icon button has an attached menu or “popup” (if applicable)
• Total number of menu items in the overflow menu (if applicable)

Design Annotations Needed

No design annotations are needed for Action Bar

Implementation Markup Needed

• An aria-label string is required for the overflow icon-only Button variants and accessible tooltips can show the icon's name for everyone.
• Action Bar can be rendered as a <section> element with an aria-label string to enable a landmark region for screen reader users.
• [Included in component] The overflow icon-only Button variants require an aria-haspopup=”true” and aria-expanded attribute for the attached menu.
• [Included in component] The menu container must have an ARIA role=“menu” attribute.
• [Included in component] All child elements inside the menu container must have an ARIA role=“menuitem” attribute.

Content Guidelines

• When naming buttons within an Action Bar, refer to the Buttons and Calls to Action section of the Content Style Guide.