Hesoyam

Note

Inline guidance that stays in the page flow. Not a toast and not a modal.

Default

variant default is the information note. Icon is supplied for you.

This deployment is using Fluid compute.

        

          1
          
          <Note>This deployment is using Fluid compute.</Note>

Types

Match the severity. secondary is quiet chrome. violet and cyan are accent-only — they are not status.

This deployment is using Fluid compute.
The domain is verified.
The last deploy failed.
This action cannot be undone.
Hobby accounts include 100 GB of bandwidth.
Preview comments are on for this project.
Observability is included on this plan.

        

          1
          
          <Note>This deployment is using Fluid compute.</Note>
        

          2
          
          <Note variant="success">The domain is verified.</Note>
        

          3
          
          <Note variant="error">The last deploy failed.</Note>
        

          4
          
          <Note variant="warning">This action cannot be undone.</Note>

Fill

fill paints a tinted background. Use it when the note sits on the same surface as surrounding cards.

This deployment is using Fluid compute.
The domain is verified.
The last deploy failed.
This action cannot be undone.

        

          1
          
          <Note fill>This deployment is using Fluid compute.</Note>
        

          2
          
          <Note variant="success" fill>The domain is verified.</Note>

Sizes

medium is the default. small fits toolbars, sidebars, and dense forms.

Bandwidth resets on the first of the month.
Bandwidth resets on the first of the month.

        

          1
          
          <Note size="small">Bandwidth resets on the first of the month.</Note>
        

          2
          
          <Note>Bandwidth resets on the first of the month.</Note>

Label

NoteLabel is a leading strong word. Keep it one or two words, then the sentence.

Note: Changes apply to new deployments only.
Error: The build exceeded the log limit.

        

          1
          
          <Note>
        

          2
          
            <NoteLabel>Note:</NoteLabel>
        

          3
          
            Changes apply to new deployments only.
        

          4
          
          </Note>

Action

NoteAction sits on the trailing edge. One small Button. Do not put a second CTA in the copy.

Upgrade to raise the concurrency limit.

        

          1
          
          <Note>
        

          2
          
            <NoteContent>Upgrade to raise the concurrency limit.</NoteContent>
        

          3
          
            <NoteAction>
        

          4
          
              <Button size="small" variant="secondary">Upgrade</Button>
        

          5
          
            </NoteAction>
        

          6
          
          </Note>

Icon

Pass an icon array to replace the default. A null icon hides it.

Open project settings to change the region.
No icon. Use this in a packed sidebar row.

        

          1
          
          <Note :icon="Settings02Icon">Open project settings to change the region.</Note>
        

          2
          
          <Note :icon="null">No icon. Use this in a packed sidebar row.</Note>

Disabled

This hint is not available on the current plan.

        

          1
          
          <Note disabled fill>This hint is not available on the current plan.</Note>

Best practices

  • Note explains something already on the page. A confirmation that must block work is a Modal. A fleeting result is a Toast.
  • error and warning are for outcomes the user must notice. secondary is for plan limits and housekeeping.
  • One sentence, sentence case. A label is optional. Do not stack three Notes in one form — collapse them or move the copy next to the field.
  • An action belongs in NoteAction , as a small secondary Button. Do not turn the whole Note into a link.
  • Hide the icon with :icon="null" when the surrounding chrome already has one, not to save space on a page-level warning.