NodeDescription

Textual title and subtitle block inside a node.

NodeDescription renders a node’s textual content - a label shown as the title and an optional description shown as the subtitle. It uses the library’s typography classes so the text matches the rest of the editor, and is typically placed in a NodePanel.Header alongside a NodeIcon.

Usage

import { NodeDescription, NodeIcon, NodePanel } from '@workflowbuilder/ui';

function NodeHeader({ icon, label, description }) {
  return (
    <NodePanel.Header>
      <NodeIcon icon={icon} />
      <NodeDescription label={label} description={description} />
    </NodePanel.Header>
  );
}

Truncation

Both lines are single-line. Text that does not fit the node width is cut with an ellipsis and the full text is available through the element’s native tooltip (title). The block never widens its node: a node keeps the design width and grows in height only through its body content.

That last property comes from contain: inline-size, so the block contributes nothing to its parent’s width. Render it inside an ancestor with a definite inline size (NodePanel.Header inside the 241px shell qualifies); in an inline-flex or fit-content wrapper it collapses to zero width.

Disabled

disabled mutes both lines with the Node Disabled text color. The node templates pass it down together with NodePanel.Root and NodeIcon, so a whole node switches state at once.

Props

labelrequired

Typestring

className

Typestring

description

Typestring

disabled

Typeboolean

Muted title and subtitle of the Node Disabled variant.

CSS variables

Color

--wb-public-node-title-color

--wb-public-node-title-subtitle

--wb-public-node-title-color-disabled

--wb-public-node-subtitle-color-disabled