Pill

Components

Pill()

Pill(props, context?): ReactNode

A Pill component is an UI element that takes the shape of a capsule/pill. It is often used to display compact information such as tags, labels, or counters. In Akasha's design system, Pills have two types: action pills and info pills. The main difference between the two is that info pills are informative only and action pills allow users to take action. Action Pills take most of the Button component's props as they also act as a button. Info Pills, on the other hand, have their own set of props mostly for customization purpose.

Parameters

Parameter	Type
props	PillProps
context?	any

Returns

ReactNode

Example

// Action pill
   <Pill
       type="action"
       label='This is an action pill'
       active={true}
       icon={<XMarkIcon />}
       iconDirection="right"
       onPillClick={clickHandler}
     />
 // Info pill
     <Pill
       type='info'
       label='This is an info pill'
       background='blue'
       borderColor='success'
       customStyle='w-20'
     />

Source

libs/design-system-core/src/components/Pill/index.tsx:58

Props

PillProps

PillProps: ActionPillProps & object | InfoPillProps & object

Source

libs/design-system-core/src/components/Pill/index.tsx:24