Action Bar

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.

Open Action Bar

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>.

Tip

You can pass any Button props to <ActionBarButton> and <ActionBarIconButton>.

Open Action Bar

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.

Open Action Bar

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	IconDefinition
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