Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-pill

Package Overview
Dependencies
Maintainers
100
Versions
357
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-pill

Forma 36: Pill component

  • 4.0.1-next-v4-6282.2214
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
34K
increased by13.64%
Maintainers
100
Weekly downloads
 
Created
Source

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

import { Props } from '@contentful/f36-docs-utils'; import { InfoCircle } from '@contentful/f36-icons';

Pills represent a set of one or multiple objects which can be entered or changed by the user. By default, pills can be removed by the user. When necessary, the order of pills can be changed by the user using drag and drop. They are used to represent complex entities in small blocks such as contact details. Contentful Pills are are used to render transition locales and tag elements.

Table of contents

How to use Pill

  • 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.

Code examples

Example of usage with draggable and close option

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

<Pill
  testId="pill-item"
  label="test label"
  onClose={() => {}}
  onDrag={() => {}}
/>

Example of the Pill component with dragHandle, in that case Icon.

// import { Pill } from '@contentful/f36-pill';
// import { InfoCircle } from '@contentful/f36-icons';

<Pill
  label="example.user@contentful.com"
  onDrag={() => {}}
  dragHandleComponent={
    <InfoCircle
      aria-label="Drag handler"
      variant="muted"
      style={{ padding: '0.375rem 0.625rem' }}
    />
  }
/>

Content recommendations:

  • Be sure the pill text is clear and concise.

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

Props

FAQs

Package last updated on 17 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc