Diagram Node
Represent an item or step inside a diagram.
Preview
Import
import { DiagramNode } from "@sigil-ui/components";Usage
<DiagramNode label="API gateway" sublabel="Routes incoming requests" badge="Healthy" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Icon configuration. |
label (required) | string | — | Readable label for the component. |
sublabel | string | — | Sublabel configuration. |
variant | DiagramNodeVariant | — | Selects a supported visual treatment. |
size | DiagramNodeSize | — | Sets the component's size. |
mono | boolean | — | Mono configuration. |
badge | ReactNode | — | Badge configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-surface | Surface |
--s-text | Text |
--s-primary | Primary |
--s-primary-muted | Primary muted |
--s-border-muted | Border muted |
--s-text-muted | Text muted |
--s-primary-contrast | Primary contrast |
--s-radius-md | Radius md |
--s-duration-fast | Duration fast |
--s-font-mono | Font mono |
--s-radius-full | Radius full |