Components

Action Bar

Design
Code

Allow users to execute on multiple items at once.

The action bar itself is triggered in a multi-select setting, assuming the user selects a number of items on which to perform a single action. (Though performing the action on just one item is also allowed.)

Web
React Native
Android
Apple
Other

3 videos selected

<ActionBar
  isOpen={true}
  infoText="3 videos selected"
  actions={[
    {
      label: 'Share',
      icon: 'share',
      onClick: () => {
        console.log('Shared');
      },
    },
    {
      label: 'Delete',
      icon: 'delete',
      disabled: true,
      onClick: () => {
        console.log('Deleted');
      },
    }
  ]}
  onClose={() => {
    console.log('Closed');
  }}
/>

Props

isOpen

bool

Determines whether the action bar is visible.

infoText

node

The text that appears on the left side. Defaults to display as bold.

actions

arrayOf
action

One or more buttons to be displayed on the right side. Each action has the following shape:

  • label (string) - the text describing the action
  • icon (element or string) - an SVG element or the name of a Uniform icon
  • disabled (bool) - determines whether the action is disabled
  • qaId (string) - a unique string to control this action in automated tests
  • actionRef (func) - a func to assign a ref to the button
  • onClick (func) - responds to the action being clicked

qaId

string

A unique string to control this actionbar in automated tests.

onClose

func

Function called when the X is clicked to close the action bar. Update the isOpen value to false.

Notes

  • The action bar is positioned via sticky. That means it will take up space in the flow of the document until the user scrolls down, at which point it will become fixed. If you don't want the empty space taken up by the action bar, you'll need to give your container a negative margin.
  • The actions have a className prop in case you need to hide the label or icon at smaller sizes.