Action bar

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/reticle/button";
import { ActionBar } from "@etched/reticle/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/reticle/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.

Ana RuizJosé NúñezLee ParkMira Osei

2 selected

import { ArchiveIcon, ArrowRightIcon } from "@phosphor-icons/react";
import { useState } from "react";
import { Button } from "@etched/reticle/button";
import { Checkbox } from "@etched/reticle/checkbox";
import { ActionBar } from "@etched/reticle/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())}>
          <Button size="sm" icon={<ArrowRightIcon />}>
            Move to stage
          </Button>
          <Button size="sm" variant="secondary-destructive" icon={<ArchiveIcon />}>
            Archive
          </Button>
        </ActionBar>
      )}
    </div>
  );
}

API reference

Prop	Type	Default	Description
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.
dismissLabel	string	"Clear selection"	Names the close button.
dismissDisabled	boolean	–	The close button shows but cannot be pressed, for example while the selection is being saved.