Risk Heatmap

Governance

New

Interactive 5x5 risk assessment matrix using likelihood x impact scoring. Visualize, categorize, and track AI risks with ISO 42001 compliance indicators.

Interactive Demo

Fully populated risk matrix with sidebar summary. Click any cell to view its risks.

AI Risk Heatmap Matrix

Likelihood x Impact risk assessment matrix

Risk Matrix

12 risks

Low Moderate High Critical

Negligible

Minor

Moderate

Major

Catastrophic

Impact →

Almost Certain

Likely

Possible

Unlikely

Rare

Likelihood

Risk Summary

Total Risks

20/25

Highest Score

By Severity

critical

high

moderate

low

Mitigation Status

Mitigated

In Progress

Unmitigated

By Category

Bias

Hallucination

Security Exploit

Operational Failure

Data Poisoning

Privacy Breach

Model Drift

Compliance Violation

ISO 42001 Compliance

Risk Coverage58%

Partial compliance. Address unmitigated risks to improve.

Score Calculation

Risk Score = Likelihood x Impact

Low (1-4)Acceptable

Moderate (5-9)Monitor

High (10-16)Action Required

Critical (17-25)Immediate Action

Max possible score: 25 (5 x 5)

Empty State

Matrix with no risks shows the severity gradient clearly.

New Risk Assessment

Likelihood x Impact risk assessment matrix

Risk Matrix

0 risks

Low Moderate High Critical

Negligible

Minor

Moderate

Major

Catastrophic

Impact →

Almost Certain

Likely

Possible

Unlikely

Rare

Likelihood

Risk Summary

Total Risks

0/25

Highest Score

By Severity

critical

high

moderate

low

Mitigation Status

Mitigated

In Progress

Unmitigated

By Category

No risks recorded

Score Calculation

Risk Score = Likelihood x Impact

Low (1-4)Acceptable

Moderate (5-9)Monitor

High (10-16)Action Required

Critical (17-25)Immediate Action

Max possible score: 25 (5 x 5)

Without Sidebar

Matrix only, useful when embedded in dashboards.

Embedded Risk View

Likelihood x Impact risk assessment matrix

Risk Matrix

5 risks

Low Moderate High Critical

Negligible

Minor

Moderate

Major

Catastrophic

Impact →

Almost Certain

Likely

Possible

Unlikely

Rare

Likelihood

Props

RiskHeatmap component API reference

Prop	Type	Default	Description
`risks*`	`RiskItem[]`	—	Array of risk items to display on the matrix
`title`	`string`	`"AI Risk Heatmap Matrix"`	Title displayed in the component header
`showSidebar`	`boolean`	`true`	Show the right sidebar with risk summary statistics
`showAddForm`	`boolean`	`true`	Show the Add Risk button and form
`showCompliance`	`boolean`	`true`	Show the ISO 42001 compliance indicator in the sidebar
`onAddRisk`	`(risk: Omit<RiskItem, "id">) => void`	—	Callback when a new risk is submitted via the form
`onExport`	`(risks: RiskItem[]) => void`	—	Callback when the export button is clicked
`onRiskSelect`	`(risk: RiskItem) => void`	—	Callback when a risk item is clicked in the detail panel
`filterCategory`	`RiskCategory \| null`	—	Pre-set category filter
`filterStatus`	`MitigationStatus \| null`	—	Pre-set mitigation status filter
`className`	`string`	—	Additional CSS classes

RiskItem Type

Prop	Type	Default	Description
`id*`	`string`	—	Unique identifier
`title*`	`string`	—	Risk title
`description*`	`string`	—	Risk description
`category*`	`RiskCategory`	—	One of: bias, hallucination, data-poisoning, privacy-breach, security-exploit, model-drift, compliance-violation, operational-failure
`likelihood*`	`LikelihoodLevel`	—	One of: rare, unlikely, possible, likely, almost-certain
`impact*`	`ImpactLevel`	—	One of: negligible, minor, moderate, major, catastrophic
`mitigationStatus*`	`MitigationStatus`	—	One of: mitigated, in-progress, unmitigated
`mitigationNotes`	`string`	—	Notes about mitigation actions taken
`owner`	`string`	—	Person or team responsible for this risk
`dateIdentified`	`string`	—	Date the risk was identified (ISO format)

Usage

Import and implementation example

import { RiskHeatmap, type RiskItem } from '@/blocks/governance/risk-heatmap'
import { useState } from 'react'

export default function RiskManagement() {
  const [risks, setRisks] = useState<RiskItem[]>([
    {
      id: '1',
      title: 'Biased hiring recommendations',
      description: 'AI model may perpetuate demographic biases.',
      category: 'bias',
      likelihood: 'likely',
      impact: 'major',
      mitigationStatus: 'in-progress',
      owner: 'Ethics Team',
    },
  ])

  const handleAddRisk = (risk: Omit<RiskItem, 'id'>) => {
    setRisks(prev => [...prev, { ...risk, id: crypto.randomUUID() }])
  }

  return (
    <RiskHeatmap
      risks={risks}
      onAddRisk={handleAddRisk}
      onExport={(data) => console.log('Export:', data)}
      onRiskSelect={(risk) => console.log('Selected:', risk)}
    />
  )
}

Built With

3 components

This block uses the following UI components from the design system:

Button Badge Card

Features

Built-in functionality

5x5 risk matrix: Likelihood x Impact grid with 25-point scoring system
Color-coded severity: Green (low), yellow (moderate), orange (high), red (critical) cell backgrounds
Interactive cell selection: Click any cell to view the risks it contains in a detail panel
8 risk categories: Bias, hallucination, data poisoning, privacy, security, model drift, compliance, operational
Mitigation tracking: Track risks as mitigated, in-progress, or unmitigated with visual indicators
Sidebar summary: Breakdown by severity, category, and mitigation status
ISO 42001 compliance: Compliance score based on risk mitigation coverage percentage
Filtering: Filter by category and mitigation status with combinable filters
Add risk form: Built-in form to add new risks with all required fields
Export for audit: Export filtered risks for compliance audits and reporting
Dark mode: Full dark mode support with semantic color tokens
Responsive layout: Sidebar stacks below matrix on smaller screens

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

Matrix cells have descriptive aria-labels with likelihood, impact, risk count, and scoreRisk items in detail panel are keyboard-focusable with role="button"Color is not the only indicator - counts, scores, and labels are always present

Keyboard Navigation

Key	Action
`Tab`	Navigate between matrix cells and interactive elements
`Enter / Space`	Select a cell or risk item
`Escape`	Close detail panel (when focused)

Notes

Risk count badges provide text alternative to color-only severity indication
Score values displayed in each cell for screen reader users
Form inputs have proper label associations
Filter buttons toggle state is communicated via visual styling

Related Components

AI Data Ownership Audit Log Alert System Policy Editor