Action Bar

A floating toolbar that provides actions related to the current selection.

Usage

The <ActionBar> component is a floating toolbar that provides actions related to the current selection. Pass it a message and icon to display a status related to the current selection. Pass in <ActionBarIconButton> and <ActionBarButton> components as children to display the available actions.

import {
  ActionBar,
  ActionBarIconButton,
  ActionBarButton,
} from "stylus-ui/ActionBar";
import { Button } from "stylus-ui/Button";
import { faCheck, faCopy, faShare } from "@fortawesome/pro-regular-svg-icons";
import { useState } from "react";

export default () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setIsOpen(true)}
        disabled={isOpen}
        variant="secondary"
      >
        {!isOpen ? "Open Action Bar" : "Action Bar is open"}
      </Button>
      <ActionBar
        open={isOpen}
        onOpenChange={setIsOpen}
        message="3 items selected"
        icon={faCheck}
      >
        <ActionBarIconButton tooltip="Copy" icon={faCopy} />
        <ActionBarIconButton tooltip="Share" icon={faShare} />
        <ActionBarButton onClick={() => setIsOpen(false)}>
          Cancel
        </ActionBarButton>
      </ActionBar>
    </>
  );
};

Actions only

To display only actions, omit the message and icon props from <ActionBar>.

import {
  ActionBar,
  ActionBarIconButton,
  ActionBarButton,
} from "stylus-ui/ActionBar";
import { Button } from "stylus-ui/Button";
import { faCopy, faShare } from "@fortawesome/pro-regular-svg-icons";
import { useState } from "react";

export default () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setIsOpen(true)}
        disabled={isOpen}
        variant="secondary"
      >
        {!isOpen ? "Open Action Bar" : "Action Bar is open"}
      </Button>
      <ActionBar open={isOpen} onOpenChange={setIsOpen}>
        <ActionBarIconButton tooltip="Copy" icon={faCopy} />
        <ActionBarIconButton tooltip="Share" icon={faShare} />
        <ActionBarButton onClick={() => setIsOpen(false)}>
          Reject
        </ActionBarButton>
        <ActionBarButton onClick={() => setIsOpen(false)} variant="primary">
          Approve
        </ActionBarButton>
      </ActionBar>
    </>
  );
};

Position

By default, the <ActionBar> will be positioned at the bottom of the screen. You can change this by setting the side prop to top.

import { ActionBar, ActionBarButton } from "stylus-ui/ActionBar";
import { Button } from "stylus-ui/Button";
import { useState } from "react";

export default () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setIsOpen(true)}
        disabled={isOpen}
        variant="secondary"
      >
        {!isOpen ? "Open Action Bar" : "Action Bar is open"}
      </Button>
      <ActionBar
        open={isOpen}
        onOpenChange={setIsOpen}
        message="Top action bar"
        side="top"
      >
        <ActionBarButton onClick={() => setIsOpen(false)}>
          Close
        </ActionBarButton>
      </ActionBar>
    </>
  );
};

API Reference

`ActionBar`

Inherits properties from Popover.

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`
`icon`	`IconDefinition`
`iconClassName`	`string`
`message`	`string`
`side`	`"bottom""top"`	`"bottom"`

`ActionBarIconButton`

Displays an icon button with a tooltip.

Inherits all properties (onClick, disabled, etc.) from Button.

Prop	Type	Default
`icon`	`IconProp`
`tooltip`	`string`

`ActionBarButton`

Displays a text button with an optional tooltip.

Inherits all properties (onClick, disabled, etc.) from Button.

Prop	Type	Default
`children`	`ReactNode`
`tooltip`	`string`