Action Bar

ActionBar is the pill at the bottom of a list page: “3,928 Users | Invite User”.

import { ActionBar, ActionBarSeparator } from '@beyul/sulmu-ui'

Source · Figma

Examples

Floating

By default the bar sticks to the bottom centre of the scrolling container.

3,928 UsersInvite User

import { ActionBar, ActionBarSeparator, AddCircleIcon, Button } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <ActionBar>
      3,928 Users
      <ActionBarSeparator />
      <Button variant="link" leftIcon={<AddCircleIcon />}>
        Invite User
      </Button>
    </ActionBar>
  )
}

In the flow

floating={false} leaves it where it is placed.

2 selectedExportDelete

import { ActionBar, ActionBarSeparator, Button } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <ActionBar floating={false}>
      2 selected
      <ActionBarSeparator />
      <Button variant="link">Export</Button>
      <Button variant="link">Delete</Button>
    </ActionBar>
  )
}

Props

Prop	Type	Default	Description
floating	boolean	true	Stick to the bottom centre of the scrolling container. Default: true.

ActionBar also accepts every div attribute. ActionBarSeparator has no props.

Usage notes

• Floating uses position: sticky, so the bar must be inside the element that scrolls.
• The separator is decorative and hidden from assistive tech.