Note

Callouts for context: info, success, warning, error.

Intents

Note

Themes apply to both markdown and code blocks.

Saved

hello-world.md synced to all devices.

Unsaved changes

This draft has edits that only exist on this device.

Sync failed

Could not reach the sync server. Retrying shortly.

<div class="flex items-start gap-3 rounded-lg border border-info/40 bg-bg-surface px-4 py-3 text-sm">
  <svg class="mt-0.5 size-4 shrink-0 text-info" …>…</svg>
  <div class="grid gap-0.5">
    <p class="font-medium text-text-primary">Note</p>
    <p class="text-text-secondary">Themes apply to both markdown and code blocks.</p>
  </div>
</div>

Action

You've hit the free note limit.

<div class="flex items-center justify-between gap-3 rounded-lg border border-info/40 bg-bg-surface px-4 py-3 text-sm">
  <p class="text-text-secondary">You've hit the free note limit.</p>
  <button class="rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground">
    Upgrade
  </button>
</div>

This is the geist Note action prop and the shadcn Alert action — a single inline CTA that trails the message.

Secondary, violet, cyan & disabled

Secondary. Neutral, no semantic color — general context.

Violet. An accent-tinted note for emphasis.

Cyan. An info-tinted note for a distinct category.

Disabled. Muted and non-interactive.

geist's type="secondary", "violet", "cyan" and the disabled prop. Buena's token set has no violet/cyan hues, so those map to accent and info.

Markdown for agents: /design/note.md · spec: /design.md