Toolbar

Overview

Toolbar é a toolbar contextual de um Node — aparece quando o node está selecionado. Wrapper sobre <NodeToolbar> do ReactFlow, posicionado abaixo do node por default.

Use pra ações relacionadas ao node específico (delete, duplicate, edit) sem ocupar espaço permanente no card.

Preview

Toolbar visível com node selecionado.

Selected node

React Flow

Usage

import { Toolbar } from "@kalvner/kds/ai/toolbar";
import { Button } from "@kalvner/kds/forms/button";
import { Copy, Trash } from "lucide-react";

function MyNode({ data, selected }) {
  return (
    <Node handles={{ target: true, source: true }}>
      <Toolbar isVisible={selected} nodeId={data.id}>
        <Button variant="ghost" size="icon"><Copy /></Button>
        <Button variant="ghost" size="icon"><Trash /></Button>
      </Toolbar>
      ...
    </Node>
  );
}

Props

Aceita todos os props de <NodeToolbar> do ReactFlow:

Prop	Tipo	Default	Descrição
`nodeId`	`string \| string[]`	—	ID do node alvo (ou array de IDs).
`isVisible`	`boolean`	(auto pelo selected)	Override de visibilidade.
`position`	`Position`	`Position.Bottom` (KDS)	Lado do node onde aparece.
`offset`	`number`	`10`	Distância em pixels do node.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alinhamento.
`className`	`string`	KDS aplica `flex gap-1 rounded-sm border bg-background p-1.5`.	Override.

Subcomponents

Toolbar é monolítico — children são botões livres.

States

Estado	Comportamento
`isVisible=true` ou node selected	Renderiza.
Caso contrário	Não renderiza.

ReactFlow trata visibilidade automática quando você omite isVisible e usa selected no Node.

When to use

Actions contextuais por node (delete, copy, edit, configure).
UI que precisa ser descoberta on-demand sem ocupar permanente.

When not to use

Actions globais — use Panel.
Actions sempre visíveis — coloque dentro de NodeAction (na header).

Best practices

Limite a 3-4 actions. Mais que isso, mova pra DropdownMenu acionado de um botão na Toolbar.
Tooltip em ícone-only. Ícone sem texto precisa de Tooltip.
Position consistente. Defina position uma vez no projeto, não troque por node.

Accessibility

Concern	Comportamento
Visibility	Toolbar entra/sai do DOM dinamicamente — leitores anunciam mudança via `aria-live` automático do ReactFlow.
Buttons	Cada botão precisa de `aria-label` ou Tooltip.
Keyboard	Quando node selecionado, Tab navega pra Toolbar.

Node — node parent.
Panel — toolbar global.
DropdownMenu — quando overflow de actions.

Toolbar

On this page