Note
Display text that requires attention or provides additional information.
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
variantby meaning:errorfor a problem the user must fix,warningfor a consequence to acknowledge,successfor a passed check,secondaryfor neutral information.
BannerBehavior
- 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
NoteActionholds a single inline CTA. Don’t pair it with a second button.
Content
NoteLabelis a 1–2 word Title Case prefix that names the topic:Region Change,Rate Limit,Plan Limit. Cut hedges likeHeads Up,FYI, andNote.NoteContentis one sentence in active voice that names the impact:Changing this region restarts all functions.- No
variant="info"exists; omitvariantfor the default info icon or usevariant="secondary"for neutral copy. - Single-fragment labels take no period; full descriptive sentences in the body do.
Was this helpful?