Diagram Node
A labeled node with icon, sublabel, variant, and optional badge for use inside diagrams.
Preview
Import
import { DiagramNode } from "@sigil-ui/components";Usage
<DiagramNode label="API gateway" sublabel="Routes incoming requests" badge="Healthy" />Variants
<DiagramNode label="Default" variant="default" />
<DiagramNode label="Highlighted" variant="highlighted" />
<DiagramNode label="Muted" variant="muted" />
<DiagramNode label="Accent" variant="accent" />With icon and sublabel
<DiagramNode icon={<ServerIcon />} label="Worker" sublabel="us-east-1" />Monospace and badge
<DiagramNode label="redis:6379" mono badge="3" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Leading icon |
label | string | — | Primary label (required) |
sublabel | string | — | Secondary text below label |
variant | "default" | "highlighted" | "muted" | "accent" | "default" | Visual variant |
size | "sm" | "md" | "lg" | "md" | Node size |
mono | boolean | false | Use monospace font |
badge | ReactNode | — | Badge rendered at top-right corner |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.