Skip to content
Stylus UI

Action Bar

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

Usage

Section titled “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

Section titled “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

Section titled “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

Section titled “API Reference”

ActionBar

Section titled “ActionBar”

A toolbar which floats at the top or bottom of the viewport.

children

ReactNode

Action buttons (e.g. ActionBarIconButton, ActionBarButton) shown at the end.

className

string

Classes applied to the bar container.

container

null | Element | DocumentFragment

DOM node to portal the bar into.

defaultOpen

boolean

icon

IconDefinition

Icon shown before the message.

iconClassName

string

Classes applied to the message icon.

message

string

Short message shown at the start of the bar.

modal

boolean

onOpenChange

(open: boolean) => void

open

boolean

side

"bottom" | "top" = "bottom"

Position of the bar: bottom or top of viewport.

ActionBarIconButton

Section titled “ActionBarIconButton”

An icon button with a tooltip that is used within ActionBar.

icon

Required
IconDefinition

Icon displayed in the button.

tooltip

Required
string

Tooltip text shown on hover (also used as aria-label).

disabled

boolean = false

Disable the button, preventing it from being clicked.

dropdown

boolean = false

Display a caret icon to indicate that this button opens a dropdown menu.

href

string

Navigate to a URL when clicked. If provided, the button will render as an anchor element.

iconEnd

IconDefinition

Display an icon at the end of the button.

iconEndProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props to pass to the icon component at the end of the button.

iconProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props to pass to the icon component at the start of the button.

loading

boolean = false

Display a loading indicator to the left of the button.

size

"small" | "default" | "large" | "huge" = "default"

The size of the button.

theme

"light" | "dark"

The theme of the button.

variant

"primary" | "secondary" | "ghost" | "danger" = "primary"

The variant of the button.

  • primary: A primary button with a brand gradient background. Limit usage to one per page.
  • secondary: A secondary button with a plain stroke. Use for most buttons.
  • ghost: A ghost button with a transparent background. Use for buttons that should blend into the background.
  • danger: A danger button with a red background. Use for destructive actions.

ActionBarButton

Section titled “ActionBarButton”

A text button that is used within an ActionBar. Should come last when used alongside multiple icon buttons.

children

Required
ReactNode

Button label (text).

disabled

boolean = false

Disable the button, preventing it from being clicked.

dropdown

boolean = false

Display a caret icon to indicate that this button opens a dropdown menu.

href

string

Navigate to a URL when clicked. If provided, the button will render as an anchor element.

icon

IconDefinition

Display an icon at the start of the button.

iconEnd

IconDefinition

Display an icon at the end of the button.

iconEndProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props to pass to the icon component at the end of the button.

iconProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props to pass to the icon component at the start of the button.

loading

boolean = false

Display a loading indicator to the left of the button.

size

"small" | "default" | "large" | "huge" = "default"

The size of the button.

theme

"light" | "dark"

The theme of the button.

tooltip

string

Optional tooltip shown on hover.

variant

"primary" | "secondary" | "ghost" | "danger" = "primary"

The variant of the button.

  • primary: A primary button with a brand gradient background. Limit usage to one per page.
  • secondary: A secondary button with a plain stroke. Use for most buttons.
  • ghost: A ghost button with a transparent background. Use for buttons that should blend into the background.
  • danger: A danger button with a red background. Use for destructive actions.