---
title: "DisclaimerNote"
description: "The short standing note saying this is information, not medical advice. It is placed by rule, so it is always in the same place and never in the way."
url: "https://opsinjs.pensievelabs.org/components/disclaimer-note"
source: "https://opsinjs.pensievelabs.org/components/disclaimer-note.md"
section: "Components"
status: "shipped"
kind: "component"
category: "health-communication"
reviewed: "2026-09-20"
reviewer: "engineering"
aliases: ["not medical advice", "disclaimer", "legal note", "safety note", "small print"]
governedBy: ["regulatory-context", "clinical-interaction-guidelines", "safety-review-checklist"]
usedIn: ["ask-users-for/ethnicity", "ask-users-for/height-and-weight", "ask-users-for/medications", "ask-users-for/sex-and-gender", "ask-users-for/symptoms", "choose-a-component", "consent-and-permissions", "consent-flow", "diabetes-medicines-app", "onboarding-and-first-run", "onboarding-screen", "result-disclosure", "results-screen", "sharing-with-a-clinician", "value-against-a-range"]
implemented: true
---

> Elements written as `<PascalCase … />` below are opsinjs documentation
> components. Their attributes are the content: the values they render are
> generated from `tokens/*.json` and `registry/catalogue.ts` and are
> published separately at https://opsinjs.pensievelabs.org/r/index.json and under the Reference
> section.
> `<StubNotice>` IS THE EXCEPTION, AND IT IS THE ONE TO READ. It is a
> paired element rather than a self-closing one, and the text between
> its opening and closing tags is prose an author wrote, reproduced
> below word for word. That prose is where this page says whether the
> component has been reviewed. Read the children, not only the
> attributes.

<StubNotice
  name="disclaimer-note"
  status="shipped"
  questions="[
  &#x22;Whether the rule is one note per screen, per session or per health surface, since the code enforces none of these.&#x22;,
  &#x22;Whether the note needs a dismiss control, whether a dismissed note returns, and whether the product must record that a reader saw it.&#x22;,
  &#x22;Whether visible text is the right home for textVersion, or whether the closed data-attribute vocabulary needs a fifth member.&#x22;,
]"
>
  Audited against WCAG 2.2 AA. Clinical review pending.
</StubNotice>

## Preview [#preview]

<ComponentPreview name="disclaimer-note" />

## Installation [#installation]

<ComponentInstall name="disclaimer-note" unbuilt="false" importPath="@/components/ui/disclaimer-note" dependencies="[&#x22;lucide-react&#x22;]" registryDependencies="[&#x22;link&#x22;]" />

## Usage [#usage]

```tsx
import { DisclaimerNote } from "@/components/ui/disclaimer-note"
```

```tsx
<DisclaimerNote placement="footer">
  The product's own two sentences go here. opsinjs ships none of them.
</DisclaimerNote>
```

## When to use it [#when-to-use-it]

<WhenToUse
  use="[
  &#x22;Any surface that shows a health value, range, status or derived score to the person it belongs to.&#x22;,
  &#x22;The end of a flow that gathered health information, where the reader may expect an assessment they will not get.&#x22;,
  &#x22;Wherever a product could be mistaken for a clinical service, such as a symptom questionnaire or a result summary.&#x22;,
]"
  avoid="[
  { case: &#x22;The reader needs to do something now, and the note would sit above the instruction.&#x22;, instead: &#x22;care-card&#x22; },
  { case: &#x22;The message is specific to one result rather than a standing statement about the product.&#x22;, instead: &#x22;callout&#x22; },
  { case: &#x22;Something has changed and needs the reader's attention.&#x22;, instead: &#x22;alert-banner&#x22; },
  { case: &#x22;You are explaining a word rather than the product's limits.&#x22;, instead: &#x22;term&#x22; },
  { case: &#x22;The reader must acknowledge the statement before continuing, and the product needs a record of it.&#x22;, instead: &#x22;consent-sheet&#x22; },
]"
/>

## Clinical meaning [#clinical-meaning]

**Asserts.** That the product provides information rather than clinical assessment,
does not replace a clinician's advice and, where relevant, is not a medical device.
The component supplies position, type size, ink and boundary, and none of the content.

**Never read as.** A waiver or a substitute for designing safely: a disclaimer does not
make an unsafe screen safe. It is never *this number is unreliable*, since the note is
about the product's role, not the measurement. The
[safety review checklist](../health/safety-review-checklist.mdx) judges the screen.

**Colour axis.** Neither. There is no `status` or `category` prop, no `data-status` or
`data-category`, and no fill. See
[The two colour axes](../health/two-colour-axes.mdx).

**Thresholds.** None. No clinical number is written into the component and none passes
through it: no threshold, reference range, score band or staleness boundary.

**Words.** The consuming product's, under the
[clinical interaction guidelines](../health/clinical-interaction-guidelines.mdx).
opsinjs ships no legal text: no default string, no placeholder, no vetted variant and
no translation fallback. [Regulatory context](../health/regulatory-context.mdx) sets
out what DCB0129, DCB0160, the EU MDR and FDA SaMD ask of the product.

<SafetyCallout severity="attention" evidence="opinion">
  This note sets expectations. It never transfers risk onto the reader.
</SafetyCallout>

## Anatomy [#anatomy]

<Anatomy
  name="disclaimer-note"
  parts="[
  {
    name: &#x22;DisclaimerNote&#x22;,
    describes: &#x22;The root, outside both colour axes: no status or category prop, no fill, no role, no live region.&#x22;,
    prop: &#x22;placement&#x22;,
  },
  {
    name: &#x22;DisclaimerNote.Icon&#x22;,
    describes: &#x22;Optional, off by default, decorative and aria-hidden. The glyph is fixed, so it is never a warning triangle.&#x22;,
    prop: &#x22;icon&#x22;,
  },
  {
    name: &#x22;DisclaimerNote.Text&#x22;,
    describes: &#x22;The product's one or two sentences, at body size in body ink. Prints an admission when nothing is supplied.&#x22;,
    prop: &#x22;children&#x22;,
  },
  {
    name: &#x22;DisclaimerNote.Link&#x22;,
    describes: &#x22;The fuller statement. Label and href arrive as one object, and a vague label warns in development.&#x22;,
    prop: &#x22;more&#x22;,
  },
  {
    name: &#x22;DisclaimerNote.Version&#x22;,
    describes: &#x22;The wording's id, rendered exactly as written at footnote size in secondary ink.&#x22;,
    prop: &#x22;textVersion&#x22;,
  },
]"
/>

## Examples [#examples]

### One note, at the foot of the surface [#one-note-at-the-foot-of-the-surface]

Three rows and one `placement="footer"` note under all of them: not one per row, and
never above them.

<ComponentPreview name="disclaimer-note-once-at-the-foot-of-a-surface" kind="example" align="start" />

### When nobody wrote the words [#when-nobody-wrote-the-words]

Copy from a content service can arrive empty. `children` of `undefined`, `false`, `0`,
an empty array or whitespace prints an admission and warns in development. Copy in an
element is taken at its word.

<ComponentPreview name="disclaimer-note-no-text-supplied" kind="example" align="start" />

## Content guidelines [#content-guidelines]

Two sentences at most: what the product does, then what it does not do. Use plain
words, *this app* rather than *the Service*, and the job title a reader recognises.
Name the link for where it goes, because *learn more* raises a development warning.

<DoDont>
  <DoDont.Do>
    **Name what the product does, then the one limit that matters most, one sentence
    each, in the product's register.**
  </DoDont.Do>

  <DoDont.Dont>
    **Open with the trading name, stack abstract nouns for what it is not, and close by
    placing reliance on the reader.**
  </DoDont.Dont>
</DoDont>

## Accessibility [#accessibility]

**Audited against WCAG 2.2 AA.** A source pass and a rendered pass, author-run rather
than independent, clinical review still pending. The rendered pass on
`/view/base/base-lyra/component/disclaimer-note` was clean: zero axe violations, the
link kept its target floor, focus-visible held, and nothing scrolled sideways at 320px
or 200% text. Nothing in the source needed changing. The standing guarantees hold: type
sizes and colours are role tokens, the decorative glyph is `aria-hidden`, the statement
is a real paragraph, and the only interactive element is a real anchor that warns on
unhelpful labels.

**One deferred item.** The root is a plain `<div>` with no `role` and no accessible
name, so a screen reader meets the note as ordinary sentences rather than a bounded
"note". Reading order and content are fully conveyed, so this is not an AA failure. The
boundary is an enhancement left out on purpose: a `role` is a spec decision reserved to
review, and an `aria-label` would inject an English string into a translation-neutral
component. Standing gates still cover its one string on every commit: no `px` type size,
no raw colour literal, no banned word.

<KeyboardTable
  name="disclaimer-note"
  rows="[
  {
    keys: &#x22;Tab&#x22;,
    action: &#x22;Moves to the link, when there is one&#x22;,
    notes: &#x22;The note is text, not a tab stop. The link is the only focusable part.&#x22;,
  },
  {
    keys: &#x22;Shift + Tab&#x22;,
    action: &#x22;Moves back out of the link&#x22;,
    notes: &#x22;One stop, so reverse order matches visual order.&#x22;,
  },
  {
    keys: &#x22;Enter&#x22;,
    action: &#x22;Follows the link&#x22;,
    notes: &#x22;An ordinary anchor, so modifier-clicks keep the browser's behaviour.&#x22;,
  },
  {
    keys: &#x22;Space&#x22;,
    action: &#x22;Scrolls the page, as it does anywhere else&#x22;,
    notes: &#x22;Nothing here captures Space.&#x22;,
  },
]"
/>

<ContrastReport component="disclaimer-note" />

## API reference [#api-reference]

<PropsTable name="DisclaimerNoteProps" />

`children` is typed optional and required by the contract, so the missing state can
render and print its admission. `placement` changes only the space above the note, and
there is no `top` value: never above the result. There is no default text and no
colour prop, and an axis class through `className` raises a development warning.

## Related [#related]

* [Callout](./callout.mdx) is information about the content. A disclaimer is about the product.
* [AlertBanner](./alert-banner.mdx) is entitled to speak; styling a disclaimer as one is the commonest mistake.
* [ConsentSheet](./consent-sheet.mdx) is a request the reader answers, not a statement they read.
* [CareCard](./care-card.mdx) is an instruction with an author. A disclaimer asks for nothing.