
components
Pill
v.1.0.0 | SaturnUsage
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
Property | Type | Default | Description |
---|---|---|---|
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 |
initialState | Boolean | false | Boolean to indicate if Pill is selected initially |
onPillChange | (checked: boolean, value: string) => void | - | Funtion to change selected option |
focus | Boolean | false | Boolean to indicate if Pill has the focus initially |
onFocus | FocusEventHandler | - | Function called when Pill takes the focus |
decorativeIcon | IElementOrIcon | - | Decorative icon showed in the pill |
selectedIcon | IElementOrIcon | - | Icon showed when pill is selected |
disabled | Boolean | - | Boolean to indicate if Pill is disabled |
multiSelect | Boolean | false | Boolean to indicate if Pill has multiselect option |
selected | Boolean | - | Boolean to indicate if Pill is selected |
name | String | - | Text applied to name property of pill |
tabIndex | Number | - | Value associated to tabIndex property of parent pill container. It is used to make possible to take focus |
value | String | - | Value of the pill input |
aria-label | String | - | Text applied to aria-label property of pill |
aria-labelledby | String | - | Text applied to aria-labelledby property of pill |
aria-checked | Boolean | - | Text applied to aria-checked property of pill |
aria-describedby | String | - | Text applied to aria-describedby property of pill |
aria-pressed | String | - | Text applied to aria-pressed property of pill |
aria-disabled | String | - | Text applied to aria-disabled property of pill |
dataTestId | String | - | Id for testing |
ctv | PillStylesType | - | Modify styles for the default version of the component |
Controlled
Property | Type | Default | Description |
---|---|---|---|
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 |
initialState | Boolean | false | Boolean to indicate if Pill is selected initially |
onPillChange | (checked: boolean, value: string) => void | - | Funtion to change selected option |
focus | Boolean | false | Boolean to indicate if Pill has the focus initially |
onFocus | FocusEventHandler | - | Function called when Pill takes the focus |
decorativeIcon | IElementOrIcon | - | Decorative icon showed in the pill |
selectedIcon | IElementOrIcon | - | Icon showed when pill is selected |
disabled | Boolean | - | Boolean to indicate if Pill is disabled |
multiSelect | Boolean | false | Boolean to indicate if Pill has multiselect option |
selected | Boolean | - | Boolean to indicate if Pill is selected |
name | String | - | Text applied to name property of pill |
tabIndex | Number | - | Value associated to tabIndex property of parent pill container. It is used to make possible to take focus |
value | String | - | Value of the pill input |
onKeyDown | (value: string) => KeyboardEventHandler | - | Function called when Pill has the focus and user enter a key |
aria-label | String | - | Text applied to aria-label property of pill |
aria-labelledby | String | - | Text applied to aria-labelledby property of pill |
aria-checked | Boolean | - | Text applied to aria-checked property of pill |
aria-describedby | String | - | Text applied to aria-describedby property of pill |
aria-pressed | String | - | Text applied to aria-pressed property of pill |
aria-disabled | String | - | Text applied to aria-disabled property of pill |
dataTestId | String | - | Id for testing |
ctv | PillStylesType | - | Modify styles for the default version of the component |