@contentful/f36-pill NPM

title: 'Pill' type: 'component' status: 'stable' slug: /components/pill/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/pill' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-pill--basic'

typescript: ./src/Pill.tsx

Pill component allows to represent a set of one or multiple objects which can be entered or changed by the user. For example, tags. Pill can be integrated with a drag-and-drop solution.

Import

import { Pill } from '@contentful/f36-components';
// or
import { Pill } from '@contentful/f36-pill';

Examples

Using with draggable and close option

Using the Pill component with custom dragHandleComponent

Integration with drag and drop libraries

See the Dnd kit integration page for examples using the pill component with drag and drop.

Props (API reference)

Content guidelines

Be sure the pill text is clear and concise
Use Pill to represent data like contact details or tagging
It can be used for web content that needs to be labeled, categorized, or organized using keywords that describe them.

Accessibility

Label value is passed in the component as a title in the span element, like follows title={label}.
The default drag component has a aria-label="Drag handler", custom drag handle components should also include an aria-label, as shown on the example

@contentful/f36-button @contentful/f36-core @contentful/f36-drag-handle @contentful/f36-icons @contentful/f36-tokens @contentful/f36-tooltip emotion

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

9 days ago

12 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

8 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

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