Geist Design System

Note

Display text that requires attention or provides additional information.

Default
A small note.
A default note.
A large note.

Action
This note details some information.
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.

Success
This note details some success information.
This note details some success information.
This note details some success information. Check the documentation to learn more.
This filled note details some success information.
This filled note details some success information.
This filled note details some success information. Check the documentation to learn more.

Error
This note details some error information.
This note details some error information.
This note details some success information. Check the documentation to learn more.
This filled note details some error information.
This filled note details some error information.
This filled note details some success information. Check the documentation to learn more.

Warning
This note details some warning information.
This note details some warning information.
This note details some success information. Check the documentation to learn more.
This filled note details some warning information.
This filled note details some warning information.
This filled note details some success information. Check the documentation to learn more.

Secondary
This note details some secondary information.
This note details some secondary information.
This note details some success information. Check the documentation to learn more.
This filled note details some secondary information.
This filled note details some secondary information.
This filled note details some success information. Check the documentation to learn more.

Violet
This note details some violet information.
This note details some violet information.
This note details some success information. Check the documentation to learn more.
This filled note details some violet information.
This filled note details some violet information.
This filled note details some success information. Check the documentation to learn more.

Cyan
This note details some cyan information.
This note details some cyan information.
This note details some success information. Check the documentation to learn more.
This filled note details some cyan information.
This filled note details some cyan information.
This filled note details some success information. Check the documentation to learn more.

Disabled
This note details a warning.
This filled note details some success information. Check the documentation to learn more.

Labels

Default label

This is a note of type `secondary`.
This is a fill note of type `secondary`.
This is a note of type `tertiary`.
This is a fill note of type `tertiary`.
This is a note of type `warning`.
This is a fill note of type `warning`.
This is a note of type `success`.
This is a fill note of type `success`.
This is a note of type `default`.
This is a fill note of type `default`.
This is a note of type `alert`.
This is a fill note of type `alert`.
This is a note of type `error`.
This is a fill note of type `error`.
This is a note of type `lite`.
This is a fill note of type `lite`.
This is a note of type `ghost`.
This is a fill note of type `ghost`.
This is a note of type `alert`.
This is a fill note of type `alert`.
This is a note of type `violet`.
This is a fill note of type `violet`.
This is a note of type `cyan`.
This is a fill note of type `cyan`.
This is a note of type `rotate-ccw`.
This is a fill note of type `rotate-ccw`.

Custom label

secondary: This is a note of type `secondary`.
secondary: This is a fill note of type `secondary`.
tertiary: This is a note of type `tertiary`.
tertiary: This is a fill note of type `tertiary`.
warning: This is a note of type `warning`.
warning: This is a fill note of type `warning`.
success: This is a note of type `success`.
success: This is a fill note of type `success`.
default: This is a note of type `default`.
default: This is a fill note of type `default`.
alert: This is a note of type `alert`.
alert: This is a fill note of type `alert`.
error: This is a note of type `error`.
error: This is a fill note of type `error`.
lite: This is a note of type `lite`.
lite: This is a fill note of type `lite`.
ghost: This is a note of type `ghost`.
ghost: This is a fill note of type `ghost`.
alert: This is a note of type `alert`.
alert: This is a fill note of type `alert`.
violet: This is a note of type `violet`.
violet: This is a fill note of type `violet`.
cyan: This is a note of type `cyan`.
cyan: This is a fill note of type `cyan`.
rotate-ccw: This is a note of type `rotate-ccw`.
rotate-ccw: This is a fill note of type `rotate-ccw`.

No label

This is a note of type `secondary`.
This is a fill note of type `secondary`.
This is a note of type `tertiary`.
This is a fill note of type `tertiary`.
This is a note of type `warning`.
This is a fill note of type `warning`.
This is a note of type `success`.
This is a fill note of type `success`.
This is a note of type `default`.
This is a fill note of type `default`.
This is a note of type `alert`.
This is a fill note of type `alert`.
This is a note of type `error`.
This is a fill note of type `error`.
This is a note of type `lite`.
This is a fill note of type `lite`.
This is a note of type `ghost`.
This is a fill note of type `ghost`.
This is a note of type `alert`.
This is a fill note of type `alert`.
This is a note of type `violet`.
This is a fill note of type `violet`.
This is a note of type `cyan`.
This is a fill note of type `cyan`.
This is a note of type `rotate-ccw`.
This is a fill note of type `rotate-ccw`.

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.