Note

Overview

Notes are often temporary messages that communicate information to the user. They are primarily used to indicate important information or changes to typical processes that need to be highlighted. Communicating effectively with users is important to building trust.

Default

<div className="note p-4">
  <span className="font-medium">Note:</span> This note details some information
</div>

Button

<div className="note p-4 flex justify-between items-center">
  <span className="font-medium">Note:</span> This note details some information with call to action

  <button className="px-3 py-2 font-semibold rounded-lg bg-gray-200 text-gray-900 text-base hover:shadow-3xl hover:shadow-gray-200 ease-in-out duration-200 dark:bg-gray-600 dark:text-gray-200 dark:shadow-gray-600">Upgrade</button>
</div>

Sizes

<div className="note p-3 text-sm">
  <span className="font-medium">Note:</span> A small note
</div>
<div className="note p-4">
  <span className="font-medium">Note:</span> A default note
</div>
<div className="note p-5 text-lg">
  <span className="font-medium">Note:</span> A large note
</div>

Tones

<div className="note p-4 !border-transparent bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
  <span className="font-medium">Note:</span> This note details some information
</div>
<div className="note p-4 !border-transparent bg-blue-200 text-blue-500">
  <span className="font-medium">Success:</span> This note details something successful
</div>
<div className="note p-4 !border-transparent bg-red-200/40 dark:bg-red-800/40 text-red-500">
  <span className="font-medium">Error:</span> This note details there is an error
</div>
<div className="note p-4 !border-transparent bg-yellow-200/40 dark:bg-yellow-800/40 text-yellow-600">
  <span className="font-medium">Warning:</span> This note details a warning
</div>