Diagram Label
Label a diagram element with consistent typography.
Preview
Import
import { DiagramLabel } from "@sigil-ui/components";Usage
<div className="flex flex-wrap items-center justify-center gap-[var(--s-space-8)] py-[var(--s-space-6)]">
<DiagramLabel text="Input" variant="default" showDot />
<DiagramLabel text="Compiled" variant="accent" showDot showLine lineLength={36} />
<DiagramLabel text="Conflict" variant="warn" showDot />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text (required) | string | — | Text configuration. |
variant | "default" | "accent" | "warn" | — | Selects a supported visual treatment. |
showDot | boolean | — | Show Dot configuration. |
showLine | boolean | — | Show Line configuration. |
lineLength | number | — | Line Length configuration. |
position | "top" | "bottom" | "left" | "right" | — | Position configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-primary | Primary |
--s-error | Error |
--s-radius-full | Radius full |
--s-font-mono | Font mono |