Skip to main content

Chip

PlaygroundCode Example
TIP
This component extends the TouchableOpacity, View props.
APIThis is the list of additional props for the component

avatarProps
AvatarProps
​

Avatar props object

backgroundColor
string
​

Background color

badgeProps
BadgeProps
​

Badge props object

borderRadius
number
​

Border radius

containerStyle
ViewStyle
​

Component's container style

dismissColor
string
​

Dismiss color

dismissContainerStyle
ImageStyle
​

Dismiss container style

dismissIcon
ImageSourcePropType
​

Dismiss asset

dismissIconStyle
ImageStyle
​

Dismiss style

iconProps
Omit<ImageProps, 'source'>
​

Additional icon props

iconSource
ImageSourcePropType
​

Left icon's source

iconStyle
ImageStyle
​

Icon style

label
string
​

Main Chip text

labelStyle
TextStyle
​

Label's style

leftElement
JSX.Element
​

Left custom element

onDismiss
(props: any) => void
​

Adds a dismiss button and serves as its callback

onPress
(props: any) => void
​

On Chip press callback

resetSpacings
boolean
​

Disables all internal elements default spacings. Helps reach a custom design

rightElement
JSX.Element
​

Right custom element

rightIconSource
ImageSourcePropType
​

Right icon's source

size
number | {{width: number, height: number}}
​

Chip's size. Number or a width and height object

testID
string
​

The test id for e2e tests

useCounter
boolean
​

Display badge as counter (no background)

useSizeAsMinimum
boolean
​

Uses size as minWidth and minHeight. Default is true