Venn Diagram
Illustrate overlap between related sets.
Preview
Import
import { VennDiagram } from "@sigil-ui/components";Usage
<VennDiagram
circles={[
{ label: "Design" },
{ label: "Engineering" },
{ label: "Product" },
]}
intersectionLabel="DX"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
circles | [VennCircle, VennCircle] | [VennCircle, VennCircle, VennC... | — | — |
intersectionLabel | string | — | Label for the intersection. |
width | number | — | — |
height | number | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-success | Success |
--s-warning | Warning |
--s-text | Text |
--s-font-mono | Font mono |