@contentful/f36-note NPM

title: 'Note' slug: /components/note/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/note' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-note--default'

typescript: ./src/Note.tsx

Notes provide context and information about a situation or action. Notes draw the users attention to a circumstance relevant to an action they're performing or a screen they're accessing.

Don't confuse notes with Notification, which appear as feedback after a user has performed an action.

Import

import { Note } from '@contentful/f36-components';
// or
import { Note } from '@contentful/f36-note';

Examples

The Note component can be configured in a number of different ways. Learn when to use certain variations with this guide.

Basic usage

Component variations

Note with title (`title`)

Note with custom icon (`icon`)

Props (API reference)

Content guidelines

Use an adequate note type to communicate the right kind of information
Place the note visually closer to the action or real estate it relates to
Unlike notifications, notes don't show up as feedback only after a user has performed an action
Use clear and succinct copy
Ensure the copy is easily scannable. Focus on the objective and limit the number of concepts in each sentence
Use progressive disclosure. Eliminate details that can be revealed as the user interacts and requires more information
Use active voice, present tense, and consider tone of voice depending on the circumstance
To add additional context, link out to documentation
Do not preface the instructions with introductory text, such as "please"

@contentful/f36-button @contentful/f36-core @contentful/f36-icon @contentful/f36-icons @contentful/f36-tokens @contentful/f36-typography emotion

@infinitebrahmanuniverse/nolb-_cont @everything-registry/sub-chunk-196 @zalastax/nolb-_cont @contentful/f36-components @contentful/field-editor-shared

9 days ago

11 days ago

12 days ago

12 days ago

15 days ago

18 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

7 months ago

7 months ago

8 months ago

7 months ago

10 months ago

9 months ago

9 months ago

10 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

11 months ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

4.0.1-next-v4-10675.2471

3 years ago

4.0.1-next-v4-10848.2476

3 years ago

4.0.1-next-v4-10715.2474

3 years ago

4.0.1-next-v4-10839.2475

3 years ago

4.0.1-next-v4-10916.2480

3 years ago

4.0.1-beta.2482

3 years ago

4.0.1-beta.2483

3 years ago

4.0.1-next-v4-10931.2481

3 years ago

4.0.1-beta.2489

3 years ago

4.0.1-beta1.2482

3 years ago

4.0.1-next-v4-10680.2472

3 years ago

4.0.1-next-v4-10623.2468

3 years ago

4.0.1-next-v4-10647.2470

3 years ago

4.0.1-next-v4-10633.2469

3 years ago

4.0.1-next-v4-10536.2462

3 years ago

4.0.1-next-v4-10542.2463

3 years ago

4.0.1-next-v4-10612.2466

3 years ago

4.0.1-next-v4-10595.2465

3 years ago

4.0.1-next-v4-10472.2461

3 years ago

4.0.1-next-v4-10564.2464

3 years ago

4.0.1-next-v4-10423.2460

3 years ago

4.0.1-next-v4-10118.2446

3 years ago

4.0.1-next-v4-10266.2451

3 years ago

4.0.1-next-v4-10292.2452

3 years ago

4.0.1-next-v4-10345.2455

3 years ago

4.0.1-next-v4-9745.2431

3 years ago

4.0.1-next-v4-9473.2426

3 years ago

4.0.1-next-v4-9468.2425

3 years ago

4.0.1-next-v4-9789.2434

3 years ago

4.0.1-next-v4-9961.2441

3 years ago

4.0.1-next-v4-10041.2444

3 years ago

4.0.1-next-v4-10373.2458

3 years ago

4.0.1-next-v4-10308.2453

3 years ago

4.0.1-next-v4-9971.2442

3 years ago

4.0.1-next-v4-9697.2430

3 years ago

4.0.1-next-v4-10223.2450

3 years ago

4.0.1-next-v4-10152.2447

3 years ago

4.0.1-next-v4-10330.2454

3 years ago

4.0.1-next-v4-10204.2448

3 years ago

4.0.1-next-v4-9780.2433

3 years ago

4.0.1-next-v4-9898.2438

3 years ago

4.0.1-next-v4-10363.2457

3 years ago

4.0.1-next-v4-10350.2456

3 years ago

4.0.1-next-v4-9766.2432

3 years ago

4.0.1-next-v4-9921.2439

3 years ago

4.0.1-next-v4-9502.2427

3 years ago

4.0.1-next-v4-10378.2459

3 years ago

4.0.1-next-v4-9547.2428

3 years ago

4.0.1-next-v4-9952.2440

3 years ago

4.0.1-next-v4-9335.2422

3 years ago

4.0.1-next-v4-9346.2423

3 years ago

4.0.1-next-v4-9281.2419

3 years ago

4.0.1-next-v4-9274.2418

3 years ago

4.0.1-next-v4-9248.2416

3 years ago

4.0.1-next-v4-9320.2421

3 years ago

4.0.1-next-v4-9287.2420

3 years ago

4.0.1-next-v4-9225.2415

3 years ago

4.0.1-next-v4-9200.2414

3 years ago

4.0.1-next-v4-9168.2413

3 years ago

4.0.1-next-v4-9155.2412

3 years ago

4.0.1-next-v4-9049.2406

3 years ago

4.0.1-next-v4-9126.2410

3 years ago

4.0.1-next-v4-9086.2408

3 years ago

4.0.1-next-v4-9075.2407

3 years ago

4.0.1-next-v4-9019.2404

3 years ago

4.0.1-next-v4-8971.2401

3 years ago

4.0.1-next-v4-8986.2402

3 years ago

4.0.1-next-v4-8879.2361

3 years ago

4.0.1-next-v4-8833.2358

3 years ago

4.0.1-next-v4-8904.2363

3 years ago

4.0.1-next-v4-8955.2400

3 years ago

4.0.1-next-v4-8942.2365

3 years ago

4.0.1-next-v4-8846.2359

3 years ago

4.0.1-next-v4-8947.2366

3 years ago

4.0.1-next-v4-8753.2355

3 years ago

4.0.1-next-v4-8804.2357

3 years ago

4.0.1-next-v4-8514.2351

3 years ago

4.0.1-next-v4-8739.2354

3 years ago

4.0.1-next-v4-8733.2353

3 years ago

4.0.1-next-v4-8499.2349

3 years ago

4.0.1-next-v4-8377.2344

3 years ago

4.0.1-next-v4-8455.2348

3 years ago

4.0.1-next-v4-8286.2343

3 years ago

4.0.1-next-v4-8206.2342

3 years ago

4.0.1-next-v4-8093.2338

3 years ago

4.0.1-next-v4-8101.2339

3 years ago

4.0.1-next-v4-8125.2340

3 years ago

4.0.1-next-v4-8053.2336

3 years ago

4.0.1-next-v4-8006.2334

3 years ago

4.0.1-next-v4-8039.2335

3 years ago

4.0.1-next-v4-7963.2332

3 years ago

4.0.1-next-v4-8060.2337

3 years ago

4.0.1-next-v4-7985.2333

3 years ago

4.0.1-next-v4-7936.2331

3 years ago

4.0.1-next-v4-7911.2329

3 years ago

4.0.1-next-v4-7926.2330

3 years ago

4.0.1-next-v4-7774.2326

3 years ago

4.0.1-next-v4-7712.2324

3 years ago

4.0.1-next-v4-7888.2327

3 years ago

4.0.1-next-v4-7654.2323

3 years ago

4.0.1-next-v4-7604.2322

3 years ago

4.0.1-next-v4-6754.2279

3 years ago

4.0.1-next-v4-6859.2287

3 years ago

4.0.1-next-v4-6811.2284

3 years ago

4.0.1-next-v4-6748.2278

3 years ago

4.0.1-next-v4-6854.2286

3 years ago

4.0.1-next-v4-6831.2285

3 years ago

4.0.1-next-v4-6763.2280

3 years ago

4.0.1-next-v4-6795.2281

3 years ago

4.0.1-next-v4-6652.2269

3 years ago

4.0.1-next-v4-6660.2272

3 years ago

4.0.1-next-v4-6682.2274

3 years ago

4.0.1-next-v4-6664.2273

3 years ago

4.0.1-next-v4-6714.2276

3 years ago

4.0.1-next-v4-6685.2275

3 years ago

4.0.1-next-v4-6548.2251

3 years ago

4.0.1-next-v4-6507.2250

3 years ago

4.0.1-next-v4-6436.2246

3 years ago

4.0.1-next-v4-6471.2249

3 years ago

4.0.1-next-v4-6465.2248

3 years ago

4.0.1-next-v4-6423.2245

3 years ago

4.0.1-next-v4-6408.2244

3 years ago

4.0.1-next-v4-6443.2247

3 years ago

4.0.1-next-v4-6391.2243

3 years ago

4.0.1-next-v4-6381.2242

3 years ago

4.0.1-next-v4-6330.2234

3 years ago

4.0.1-next-v4-6321.2232

3 years ago

4.0.1-next-v4-6317.2231

3 years ago

4.0.1-next-v4-6313.2230

3 years ago

4.0.1-next-v4-6289.2215

3 years ago

4.0.1-next-v4-6282.2214

3 years ago

typescript: ./src/Note.tsx

Import

Examples

Basic usage

Component variations

Note with title (title)

Note with custom icon (icon)

Props (API reference)

Content guidelines

Note with title (`title`)

Note with custom icon (`icon`)