Matrix Diagram
Compare relationships across a two-dimensional matrix.
Preview
Import
import { MatrixDiagram } from "@sigil-ui/components";Usage
<MatrixDiagram
xAxisLabel="Effort"
yAxisLabel="Impact"
xLabels={["Low Effort", "High Effort"]}
yLabels={["High Impact", "Low Impact"]}
cells={[
[
{ id: "quick", label: "Quick Wins", description: "Do first" },
{ id: "major", label: "Major Projects", description: "Plan carefully" },
],
[
{ id: "fill", label: "Fill-ins", description: "Do if time" },
{ id: "avoid", label: "Thankless Tasks", description: "Avoid" },
],
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cells (required) | MatrixCell[][] | — | Cells configuration. |
xLabels | string[] | — | X Labels configuration. |
yLabels | string[] | — | Y Labels configuration. |
xAxisLabel | string | — | X Axis Label configuration. |
yAxisLabel | string | — | Y Axis Label configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-font-mono | Font mono |
--s-text-muted | Text muted |
--s-radius-md | Radius md |
--s-border | Border |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-surface-elevated | Surface elevated |
--s-primary | Primary |
--s-text | Text |