React Verify / AI-Generated Banner
“AI-generated, may be inaccurate” is not boilerplate to bury at the bottom of the page. In a domain where a wrong number has consequences, it is a load-bearing disclosure — and the banner backs it with the one action that resolves the doubt.
Based on the datasheet, the KLV-7000 has a typical Rds(on) of 8.5 mΩ at Vgs = 10 V and a maximum gate charge of 62 nC.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| status | VerifyStatus | generated, unverified, or verified |
| message | string | Override the default line |
| sourceCount | number | Shown on the verified state |
| onVerify | () => void | Fires from the check-sources action |
Three honest states
generated is the quiet baseline — this text came from a model, review it. unverified is warmer and carries the action: the claim has not been checked against sources, and here is the button to do it. verified is the earned state — checked, with a source count to prove it. The progression matters because a blanket "AI can make mistakes" that never changes teaches users to ignore it; a label that moves from unverified to verified as work happens stays meaningful.
Pair it with the citation sources: the verify action runs your grounding check and, on success, flips the banner to verified with the count of sources that backed the claim. Each state is legible without colour — an icon and a sentence carry it — so it survives the same greyscale and colour-blind tests the rest of Kelvin does.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.