Go Main page
Go Main page

Web components

cover

components

Pill

v.1.0.0 | Saturn

Usage

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

Props

Let's delve into the versatility of the pill component by examining its available props:

Uncontrolled

PropertyTypeDefaultDescription
variant
Required
String-Current variant of Pill
children
Required
String-Children of the Pill
size
Required
String-Size of Pill defined in the theme file
initialStateBooleanfalseBoolean to indicate if Pill is selected initially
onPillChange(checked: boolean, value: string) => void-Funtion to change selected option
focusBooleanfalseBoolean to indicate if Pill has the focus initially
onFocusFocusEventHandler-Function called when Pill takes the focus
decorativeIconIElementOrIcon-Decorative icon showed in the pill
selectedIconIElementOrIcon-Icon showed when pill is selected
disabledBoolean-Boolean to indicate if Pill is disabled
multiSelectBooleanfalseBoolean to indicate if Pill has multiselect option
selectedBoolean-Boolean to indicate if Pill is selected
nameString-Text applied to name property of pill
tabIndexNumber-Value associated to tabIndex property of parent pill container. It is used to make possible to take focus
valueString-Value of the pill input
aria-labelString-Text applied to aria-label property of pill
aria-labelledbyString-Text applied to aria-labelledby property of pill
aria-checkedBoolean-Text applied to aria-checked property of pill
aria-describedbyString-Text applied to aria-describedby property of pill
aria-pressedString-Text applied to aria-pressed property of pill
aria-disabledString-Text applied to aria-disabled property of pill
dataTestIdString-Id for testing
ctvPillStylesType-Modify styles for the default version of the component

Controlled

PropertyTypeDefaultDescription
variant
Required
String-Current variant of Pill
children
Required
String-Children of the Pill
size
Required
String-Size of Pill defined in the theme file
initialStateBooleanfalseBoolean to indicate if Pill is selected initially
onPillChange(checked: boolean, value: string) => void-Funtion to change selected option
focusBooleanfalseBoolean to indicate if Pill has the focus initially
onFocusFocusEventHandler-Function called when Pill takes the focus
decorativeIconIElementOrIcon-Decorative icon showed in the pill
selectedIconIElementOrIcon-Icon showed when pill is selected
disabledBoolean-Boolean to indicate if Pill is disabled
multiSelectBooleanfalseBoolean to indicate if Pill has multiselect option
selectedBoolean-Boolean to indicate if Pill is selected
nameString-Text applied to name property of pill
tabIndexNumber-Value associated to tabIndex property of parent pill container. It is used to make possible to take focus
valueString-Value of the pill input
onKeyDown(value: string) => KeyboardEventHandler-Function called when Pill has the focus and user enter a key
aria-labelString-Text applied to aria-label property of pill
aria-labelledbyString-Text applied to aria-labelledby property of pill
aria-checkedBoolean-Text applied to aria-checked property of pill
aria-describedbyString-Text applied to aria-describedby property of pill
aria-pressedString-Text applied to aria-pressed property of pill
aria-disabledString-Text applied to aria-disabled property of pill
dataTestIdString-Id for testing
ctvPillStylesType-Modify styles for the default version of the component