NodeIcon

NodeIcon renders an icon inside a styled container for use within a node. It takes any ReactNode as its icon - typically an icon component - and wraps it in the library’s icon container styling. It is usually placed in a NodePanel.Header next to a NodeDescription.

Usage

import { User } from '@phosphor-icons/react';
import { NodeDescription, NodeIcon, NodePanel } from '@workflowbuilder/ui';

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

Disabled

disabled mutes the glyph and the container with the Node Disabled colors.

Props

iconrequired

TypeReactNode

className

Typestring

disabled

Typeboolean

Muted glyph and container of the Node Disabled variant.

CSS variables

Color

--wb-public-node-icon-color

--wb-public-node-icon-container-border-color

--wb-public-node-icon-container-background-color

--wb-public-node-icon-color-disabled

--wb-public-node-icon-container-background-color-disabled

Size

--wb-public-node-icon-border-size

--wb-public-node-icon-border-radius

--wb-public-node-icon-padding