Matrix Diagram
A 2D matrix/quadrant diagram for categorizing items by two dimensions.
Preview
Import
import { MatrixDiagram } from "@sigil-ui/components";Usage
<MatrixDiagram
xAxisLabel="Effort"
yAxisLabel="Impact"
xLabels={["Low", "High"]}
yLabels={["High", "Low"]}
cells={matrix}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cells | MatrixCell[][] | — | 2D array of cell content |
xLabels | string[] | — | Column labels |
yLabels | string[] | — | Row labels |
xAxisLabel | string | — | X-axis title |
yAxisLabel | string | — | Y-axis title |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Cell borders |
--s-surface | Cell background |
--s-surface-elevated | Cell hover background |
--s-text | Cell label text |
--s-text-muted | Axis labels, descriptions |
--s-primary | Icon color |
--s-radius-md | Cell border radius |
--s-duration-fast | Hover transition |
--s-font-mono | Axis label font |