Disputed

Agent chat · src/components/Disputed/Disputed.tsx

Marks a claim a second opinion disagrees with, inline, and shows both views.

The disagreement stays attached to the sentence it is about rather than being collected into a footnote at the bottom. A reader who does not scroll should still know the claim under their eye is contested.

The mark is keyboard-operable with Enter and Space, because it is a span with role="button" - a real button cannot be nested inside a paragraph of prose without breaking the line flow.

Import

import { Disputed } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
views	DisputedView[]	The views that disagree.
title	string
hint	string
n	number | string	A superscript number tying this to a list.
open	boolean
defaultOpen	boolean
settleLabel	React.ReactNode
closeLabel	React.ReactNode
className	string
children	React.ReactNode
onSettle	() => void	Offers to resolve it. Omit it and there is no settle button.
onOpenChange	(open: boolean) => void

Exported types

DisputedView