# Note

Display text that requires attention or provides additional information.

---

## Default

```tsx
import { Note, NoteContent } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Note>
      <NoteContent>A default note.</NoteContent>
    </Note>
  );
}
```

## Sizes

```tsx
import { Note, NoteContent } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col md:flex-row items-start justify-start gap-6 flex-initial">
      <Note size="small">
        <NoteContent>A small note.</NoteContent>
      </Note>
      <Note>
        <NoteContent>A medium note.</NoteContent>
      </Note>
    </div>
  );
}
```

## Action

```tsx
import {
  Button,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-start justify-start gap-6 flex-initial">
      <Note>
        <NoteContent>This note details some information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note>
        <NoteContent>
          This note details a large amount information that could potentially
          wrap into two or more lines, forcing the height of the Note to be
          larger.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Success

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="success">
        <NoteContent>This note details some success information.</NoteContent>
      </Note>
      <Note variant="success">
        <NoteContent>This note details some success information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="success">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link href="/#">the documentation</Link> to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="success">
        <NoteContent>
          This filled note details some success information.
        </NoteContent>
      </Note>
      <Note fill variant="success">
        <NoteContent>
          This filled note details some success information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="success">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Error

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="error">
        <NoteContent>This note details some error information.</NoteContent>
      </Note>
      <Note variant="error">
        <NoteContent>This note details some error information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="error">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link href="/geist#">the documentation</Link> to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="error">
        <NoteContent>
          This filled note details some error information.
        </NoteContent>
      </Note>
      <Note fill variant="error">
        <NoteContent>
          This filled note details some error information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="error">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Warning

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="warning">
        <NoteContent>This note details some warning information.</NoteContent>
      </Note>
      <Note variant="warning">
        <NoteContent>This note details some warning information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="warning">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link href="/geist#">the documentation</Link> to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="warning">
        <NoteContent>
          This filled note details some warning information.
        </NoteContent>
      </Note>
      <Note fill variant="warning">
        <NoteContent>
          This filled note details some warning information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="warning">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Secondary

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="secondary">
        <NoteContent>This note details some secondary information.</NoteContent>
      </Note>
      <Note variant="secondary">
        <NoteContent>This note details some secondary information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="secondary">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link data-zone="same" href="geist/#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="secondary">
        <NoteContent>
          This filled note details some secondary information.
        </NoteContent>
      </Note>
      <Note fill variant="secondary">
        <NoteContent>
          This filled note details some secondary information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="secondary">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Violet

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="violet">
        <NoteContent>This note details some violet information.</NoteContent>
      </Note>
      <Note variant="violet">
        <NoteContent>This note details some violet information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="violet">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link href="/#">the documentation</Link> to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="violet">
        <NoteContent>
          This filled note details some violet information.
        </NoteContent>
      </Note>
      <Note fill variant="violet">
        <NoteContent>
          This filled note details some violet information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="violet">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Cyan

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note variant="cyan">
        <NoteContent>This note details some cyan information.</NoteContent>
      </Note>
      <Note variant="cyan">
        <NoteContent>This note details some cyan information.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note variant="cyan">
        <NoteContent>
          This note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="cyan">
        <NoteContent>
          This filled note details some cyan information.
        </NoteContent>
      </Note>
      <Note fill variant="cyan">
        <NoteContent>
          This filled note details some cyan information.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note fill variant="cyan">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Disabled

```tsx
import {
  Button,
  Link,
  Note,
  NoteContent,
  NoteAction,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note disabled fill variant="warning">
        <NoteContent>This note details a warning.</NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
      <Note disabled fill variant="warning">
        <NoteContent>
          This filled note details some success information. Check{' '}
          <Link data-zone="same" href="/geist#">
            the documentation
          </Link>{' '}
          to learn more.
        </NoteContent>
        <NoteAction>
          <Button size="small">Upgrade</Button>
        </NoteAction>
      </Note>
    </div>
  );
}
```

## Label

```tsx
import { Note, NoteContent, NoteLabel } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Note>
      <NoteContent>
        <NoteLabel>Region Change:</NoteLabel>Changing this region restarts all
        functions.
      </NoteContent>
    </Note>
  );
}
```

## Custom icon

```tsx
import { Note, NoteContent } from '@vercel/geistcn/components';
import { IconSparkles } from '@vercel/geistcn-assets/icons';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <Note icon={<IconSparkles />}>
        <NoteContent>A custom icon replaces the variant’s default.</NoteContent>
      </Note>
      <Note icon={null}>
        <NoteContent>Pass a null icon to render no icon at all.</NoteContent>
      </Note>
    </div>
  );
}
```

## Best Practices

### When to use

* Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge.
* Pick `Banner` when the message is page-level or system-wide and needs a CTA, `Toast` for transient acknowledgments, `Modal` for destructive confirmations.
* Choose `variant` by meaning: `error` for a problem the user must fix, `warning` for a consequence to acknowledge, `success` for a passed check, `secondary` for neutral information.

### Behavior

* A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message.
* One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong.
* The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button.

### Content

* `NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`.
* `NoteContent` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`
* No `variant="info"` exists; omit `variant` for the default info icon or use `variant="secondary"` for neutral copy.
* Single-fragment labels take no period; full descriptive sentences in the body do.