# Note

Display text that requires attention or provides additional information.

---

## Default

```tsx
import { Note } 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">A small note.</Note>
      <Note>A default note.</Note>
      <Note size="large">A large note.</Note>
    </div>
  );
}
```

## Action

```tsx
import { Button, Note } 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 action={<Button size="small">Upgrade</Button>}>
        This note details some information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>}>
        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.
      </Note>
    </div>
  );
}
```

## Success

```tsx
import { Button, Link, Note } 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 type="success">This note details some success information.</Note>
      <Note action={<Button size="small">Upgrade</Button>} type="success">
        This note details some success information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="success">
        This note details some success information. Check{' '}
        <Link href="/#">the documentation</Link> to learn more.
      </Note>
      <Note fill type="success">
        This filled note details some success information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="success">
        This filled note details some success information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="success">
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Error

```tsx
import { Button, Link, Note } 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 type="error">This note details some error information.</Note>
      <Note action={<Button size="small">Upgrade</Button>} type="error">
        This note details some error information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="error">
        This note details some success information. Check{' '}
        <Link href="/geist#">the documentation</Link> to learn more.
      </Note>
      <Note fill type="error">
        This filled note details some error information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="error">
        This filled note details some error information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="error">
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Warning

```tsx
import { Button, Link, Note } 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 type="warning">This note details some warning information.</Note>
      <Note action={<Button size="small">Upgrade</Button>} type="warning">
        This note details some warning information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="warning">
        This note details some success information. Check{' '}
        <Link href="/geist#">the documentation</Link> to learn more.
      </Note>
      <Note fill type="warning">
        This filled note details some warning information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="warning">
        This filled note details some warning information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="warning">
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Secondary

```tsx
import { Button, Link, Note } 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 type="secondary">
        This note details some secondary information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="secondary">
        This note details some secondary information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="secondary">
        This note details some success information. Check{' '}
        <Link data-zone="same" href="geist/#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
      <Note fill type="secondary">
        This filled note details some secondary information.
      </Note>
      <Note
        action={<Button size="small">Upgrade</Button>}
        fill
        type="secondary"
      >
        This filled note details some secondary information.
      </Note>
      <Note
        action={<Button size="small">Upgrade</Button>}
        fill
        type="secondary"
      >
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Violet

```tsx
import { Button, Link, Note } 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 type="violet">This note details some violet information.</Note>
      <Note action={<Button size="small">Upgrade</Button>} type="violet">
        This note details some violet information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="violet">
        This note details some success information. Check{' '}
        <Link href="/#">the documentation</Link> to learn more.
      </Note>
      <Note fill type="violet">
        This filled note details some violet information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="violet">
        This filled note details some violet information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="violet">
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Cyan

```tsx
import { Button, Link, Note } 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 type="cyan">This note details some cyan information.</Note>
      <Note action={<Button size="small">Upgrade</Button>} type="cyan">
        This note details some cyan information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} type="cyan">
        This note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
      <Note fill type="cyan">
        This filled note details some cyan information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="cyan">
        This filled note details some cyan information.
      </Note>
      <Note action={<Button size="small">Upgrade</Button>} fill type="cyan">
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Disabled

```tsx
import { Button, Link, Note } 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
        action={<Button size="small">Upgrade</Button>}
        disabled
        fill
        type="warning"
      >
        This note details a warning.
      </Note>
      <Note
        action={<Button size="small">Upgrade</Button>}
        disabled
        fill
        type="warning"
      >
        This filled note details some success information. Check{' '}
        <Link data-zone="same" href="/geist#">
          the documentation
        </Link>{' '}
        to learn more.
      </Note>
    </div>
  );
}
```

## Labels

```tsx
import { Fragment, type JSX } from 'react';
import { Note } from '@vercel/geistcn/components';
import type { UseTypeTypes } from '@vercel/geistcn/utils/use-type';

const types: UseTypeTypes[] = [
  'secondary',
  'tertiary',
  'warning',
  'success',
  'default',
  'alert',
  'error',
  'lite',
  'ghost',
  'alert',
  'violet',
  'cyan',
  'rotate-ccw',
];

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
      <div className="flex flex-col items-stretch justify-start gap-2 flex-initial">
        <h3 className="text-heading-16">Default label</h3>
        {types.map((t) => (
          <Fragment key={t}>
            <Note type={t}>This is a note of type `{t}`.</Note>

            <Note fill type={t}>
              This is a fill note of type `{t}`.
            </Note>
          </Fragment>
        ))}
      </div>

      <div className="flex flex-col items-stretch justify-start gap-2 flex-initial">
        <h3 className="text-heading-16">Custom label</h3>
        {types.map((t) => (
          <Fragment key={t}>
            <Note label={t} type={t}>
              This is a note of type `{t}`.
            </Note>

            <Note fill label={t} type={t}>
              This is a fill note of type `{t}`.
            </Note>
          </Fragment>
        ))}
      </div>

      <div className="flex flex-col items-stretch justify-start gap-2 flex-initial">
        <h3 className="text-heading-16">No label</h3>
        {types.map((t) => (
          <Fragment key={t}>
            <Note label={false} type={t}>
              This is a note of type `{t}`.
            </Note>

            <Note fill label={false} type={t}>
              This is a fill note of type `{t}`.
            </Note>
          </Fragment>
        ))}
      </div>
    </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 `type` 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 `action` is a single inline CTA. Don’t pair it with a second button.

### Content

* `label` 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`.
* `children` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`
* No `type="info"` exists; omit `type` for the default info icon or use `type="secondary"` for neutral copy.
* Single-fragment labels take no period; full descriptive sentences in the body do.