Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill V2

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Selector that allows the user to choose between available options.

This component will replace the current Pill component in the next major version.

import { PillV2 } from '@kubit-ui-web/react-components'
1
<PillV2 variant='DEFAULT' label={{content: '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.

1
<PillV2 variant='DEFAULT' label={{content: 'Pill' }} />

Size

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

123
<PillV2 variant='DEFAULT' size='LARGE' label={{content: 'Pill' }} />
<PillV2 variant='DEFAULT' size='SMALL' label={{content: 'Pill' }} />
<PillV2 variant='DEFAULT' size='EXTRA_SMALL' label={{content: 'Pill' }} />

Type

Set the type prop to indicates whether the pill behaves as a button, selector or tab. By default it behaves as a button.

  • PillTypeV2.BUTTON : Pill behaves as a button.
  • PillTypeV2.SELECTOR_SIMPLE : Pill behaves as a input radio.
  • PillTypeV2.SELECTOR_MULTIPLE : Pill behaves as a input checkbox.
  • PillTypeV2.TAB : Pill behaves as a tab.
1
<PillV2 variant='DEFAULT' label={{content: 'Pill' }} type="SLECTOR_MULTIPLE" />

Selected

Setting the selected prop, it will indicate the pill is selected.

1
<PillV2 variant='DEFAULT' label={{content: 'Pill' }} selected={true} />

Disabled

Indicates the pill is disabled

1
<PillV2 variant='DEFAULT' label={{content: 'Pill' }} disabled={true} />

Icons

Use leftIcon and rightIcon props to add icons to the component.

1
<PillV2 variant='DEFAULT' label={{content: 'Pill' }} leftIcon={{icon: "ICON_PLACEHOLDER"}} rightIcon={{icon: "ICON_PLACEHOLDER"}}/>
Pill Selector V2Accessibility
Pill V2Design Specs