@paprika/pill NPM

@paprika/pill

Description

DEPRECATED - The Pill component is for showing metadata like status, type, or levels.

Installation

yarn add @paprika/pill

or with npm:

npm install @paprika/pill

Props

Pill

Prop	Type	required	default
a11yText	string	false	null
children	node	true	-
isDisabled	bool	false	false
onClick	func	false	null
pillColor	Pill.types.color.BLACK, Pill.types.color.BLUE, Pill.types.color.GREEN, Pill.types.color.GREY, Pill.types.color.ORANGE, Pill.types.color.LIGHT_BLUE, Pill.types.color.LIGHT_ORANGE, Pill.types.severity.NO_RISK, Pill.types.severity.LOW_RISK, Pill.types.severity.MEDIUM_RISK, Pill.types.severity.HIGH_RISK	false	Pill.types.color.GREY
size	Pill.types.size.SMALL, Pill.types.size.MEDIUM	false	Pill.types.size.MEDIUM

Pill

The <Pill> component is a decorate or interactive component that provides additional metadata such as: status, type or levels.

If an onClick handler is passed, it is rendered as a <RawButton>, otherwise it will be a decorated <div>.

Fore more information about the <Pill>, visit our starling site.

Usage

For a decorative pill

import Pill from "@paprika/pill";

<Pill pillColor="mediumRisk">Medium risk</Pill>;

Or a interactive pill

import Pill from "@paprika/pill";

<Pill pillColor="mediumRisk" onClick={clickHandler}>
  Click me
</Pill>;

Pill with an icon

import Pill from "@paprika/pill";
import Icon from "@paprika/icon/lib/Upload";

<Pill pillColor="mediumRisk" size="small">
  <Icon />
  Medium risk with icon
</Pill>;