Editing

SelectionBar

The verbs for whatever is selected in edit mode, floating just above it.

Provide label ("Idea: Encoding") and actions: { id, label, icon, group, onSelect, danger? }. Groups always sort text → structure → navigate → delete, separated by hairlines, so every construct's bar reads the same way.
Today: Idea — Rename · Summary | Connect · Group | Step inside | Delete. Connector — Edit label | Delete. Group — Rename | Edit ideas | Ungroup. A future construct only declares its verbs.
44px targets with an icon over a short label; under 640px labels become screen-reader-only. A toolbar with an accessible name; Delete in danger.

Live previewOpen ↗

Props

export interface SelectionBarProps {
  label: string;
  actions: EditAction[];
  style?: CSSProperties
}

import { SelectionBar } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SelectionBar/README.md