Monet
@etched/monet 0.0.1

Action bar

Ported

A labelled bar for the selected rows: the count, the actions, and a close button. Place it (for example fixed above the page) with className.

3 selected
import { ArchiveIcon, ArrowRightIcon } from "@phosphor-icons/react";
import { Button } from "@etched/monet/button";
import { ActionBar } from "@etched/monet/action-bar";

export function Preview() {
  return (
    <ActionBar aria-label="Bulk actions" count="3 selected" onDismiss={() => {}}>
      <Button size="sm" icon={<ArrowRightIcon />}>
        Move
      </Button>
      <Button size="sm" variant="secondary-destructive" icon={<ArchiveIcon />}>
        Archive
      </Button>
    </ActionBar>
  );
}

Installation

import { ActionBar } from "@etched/monet/action-bar";

Examples

With a selection

The bar shows while rows are selected. Its close button clears the selection. The app places it, for example fixed at the bottom of the page.

2 selected
import { ArchiveIcon, ArrowRightIcon } from "@phosphor-icons/react";
import { useState } from "react";
import { Button } from "@etched/monet/button";
import { Checkbox } from "@etched/monet/checkbox";
import { ActionBar } from "@etched/monet/action-bar";

const people = ["Ana Ruiz", "José Núñez", "Lee Park", "Mira Osei"];

export function WithASelection() {
  const [picked, setPicked] = useState(() => new Set(["José Núñez", "Lee Park"]));

  const pick = (name: string, on: boolean) =>
    setPicked((current) => {
      const next = new Set(current);

      if (on) next.add(name);
      else next.delete(name);

      return next;
    });

  return (
    <div className="grid">
      <div className="row">
        {people.map((name) => (
          <Checkbox key={name} label={name} checked={picked.has(name)} onCheckedChange={(on) => pick(name, on)} />
        ))}
      </div>
      {picked.size > 0 && (
        <ActionBar aria-label="Bulk actions" count={`${picked.size} selected`} onDismiss={() => setPicked(new Set())} closeLabel="Clear selection">
          <Button size="sm" icon={<ArrowRightIcon />}>
            Move to stage
          </Button>
          <Button size="sm" variant="secondary-destructive" icon={<ArchiveIcon />}>
            Archive
          </Button>
        </ActionBar>
      )}
    </div>
  );
}

Accessibility

  • A region, named by the required aria-label. The close button is named by closeLabel ("Close").
  • Screen readers hear the count when the bar appears and each time it changes, through the page's polite live region.
  • When the close button removes the bar, focus goes back to where it came into the bar from, such as a row's checkbox.
  • When another action removes the bar, such as Delete, move focus yourself, or it falls to the page.

API reference

PropTypeDefaultDescription
aria-label *string–Names the bar, for example "Bulk edit selected candidates".
count *ReactNode–What is selected, for example "3 selected". Screen readers announce it when it changes.
children *ReactNode–The actions, and any fields the app puts in the bar.
onDismiss() => void–Shows a close button at the end, which calls this. Focus first goes back to where it came into the bar from, so it does not fall to the page when the bar unmounts.
closeLabelstring"Close"Names the close button, for example "Clear selection". Pass translated text.
dismissDisabledboolean–The close button shows but cannot be pressed, for example while the selection is being saved.