Geist Design System

Note

Display text that requires attention or provides additional information.

Default

A small note.
A default note.
A large note.
Show code

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.
Show code

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.
Show code

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.
Show code

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.
Show code

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.
Show code

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.
Show code

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.
Show code

Disabled

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

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`.
Show code