Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Selector that allows the user to choose between available options.

This component will be replaced by the new PillV2 in the next major version.

import { Pill } from '@kubit-ui-web/react-components'
1
<Pill variant='DEFAULT' size='LARGE'>DEFAULT</Pill>

For utilizing multiple pill, consider checking out the pillSelector component, crafted specially for managing and selecting from a collection of pill

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the variant prop.

12
<Pill variant='DEFAULT' size='LARGE'>DEFAULT</Pill>
<Pill variant='PILL_SELECTOR' size='LARGE'>PILL SELECTOR</Pill>

Size

Kubit offers predefined size options such as LARGE, MEDIUM and SMALL , enhancing hierarchy and adaptation of pills. This setting can be customize by using the style setting.

123
<Pill variant='DEFAULT' size='LARGE'>LARGE</Pill>
<Pill variant='DEFAULT' size='MEDIUM'>MEDIUM</Pill>
<Pill variant='DEFAULT' size='SMALL'>SMALL</Pill>

Multiple

Set the multiSelect prop to allow user select more than one pill (default false). Internally, when multiSelect is set to true, the inner input will be a checkbox instead of a radio button.

123
<Pill variant="DEFAULT" size="LARGE" multiSelect={true}>
  DEFAULT
</Pill>

Selected

Setting the selected prop, it will behave as a controlled component.

123
<Pill variant="DEFAULT" size="LARGE" selectedIcon={{ icon: 'ICON_PLACEHOLDER' }} selected={true}>
  Content
</Pill>

Disabled

1
<Pill variant='DEFAULT' size='LARGE' disabled={true}>Content</Pill>

Icons

Selected icon

Use the selectedIcon prop to add an icon to the selected state.

123
<Pill variant="DEFAULT" size="LARGE" selectedIcon={{ icon: 'ICON_PLACEHOLDER' }} selected={true}>
  Content
</Pill>

Decorative icons

A left icon can be added with decorativeIcon when you need to give more visual guidance.

123456
<Pill variant="DEFAULT" size="LARGE" decorativeIcon={{icon: "ICON_PLACEHOLDER"}} selected={true}>
  Content
</Pill>
<Pill variant="DEFAULT" size="LARGE" decorativeIcon={{icon: "ICON_PLACEHOLDER"}} selected={false}>
  Content
</Pill>
Input SignatureAccessibility
PillDesign Specs