Chip

Chip component with Pressable as container, and supports full customization with different props. It has both hover and press effect that get picked from the color shades or if custom color is provided it auto generates those colors.

Here, below all the usage are shown with withCheckIcon prop set to true via the component manager, to get this as a default prop.

Usage

Blossom Chip

function ChipUsage() {
  return <Chip onPress={() => alert('Chip Pressed')}>Blossom Chip</Chip>
}

View Only

Displays non-interactive chips for informational or read-only use cases.

Blossom Chip

function ChipViewOnly() {
  return <Chip viewOnly>Blossom Chip</Chip>
}

Hide check icon

use withCheckIcon to show or hide the check icon

Blossom Chip

function ChipWithoutCheckIcon() {
  return <Chip withCheckIcon={false}>Blossom Chip</Chip>
}

clearable

use clearable prop to show/hide the clear icon at right

Blossom Chip

function ChipClearable() {
  return <Chip clearable>Blossom Chip</Chip>
}

With Check Icon

use your desired icon for left with checkIcon as a ReactNode

Custom Icon

function ChipCheckIcon() {
  return (
    <Chip checkIcon={<Icon name="information-sharp" size={16} />}>
      Custom Icon
    </Chip>
  )
}

As Badge

Displays the chip styled as a badge for compact labeling or status display.

2

40

99+

function ChipAsBadge() {
  return (
    <View row style={{alignItems: 'center'}}>
      <Chip size="small" asBadge title="2" />
      <Chip size="medium" asBadge title="40" />
      <Chip size="large" asBadge title="99+" />
    </View>
  )
}

Size

small

medium

large

function ChipSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Chip size="small" title="small" />
      <Chip size="medium" title="medium" />
      <Chip size="large" title="large" />
    </View>
  )
}

Modes

filled

tinted

outlined

plain

function ChipModes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Chip mode="filled" title="filled" />
      <Chip mode="tinted" title="tinted" />
      <Chip mode="outlined" title="outlined" />
      <Chip mode="plain" title="plain" />
    </View>
  )
}

Disabled

filled

tinted

outlined

plain

function ChipDisabled() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Chip disabled mode="filled">
        filled
      </Chip>
      <Chip disabled mode="tinted">
        tinted
      </Chip>
      <Chip disabled mode="outlined">
        outlined
      </Chip>
      <Chip disabled mode="plain">
        plain
      </Chip>
    </View>
  )
}

Modes and Sizes

Showcases how chip modes and sizes appear

tinted

tinted

tinted

tinted

tinted

tinted

tinted

tinted

tinted

tinted

tinted

tinted

All Statuses

primary

primary

primary

primary

accent

accent

accent

accent

success

success

success

success

info

info

info

info

warning

warning

warning

warning

error

error

error

error

Custom Chips



Custom Chip



function ChipCustom() {
  return (
    <View style={{justifyContent: 'space-evenly'}}>
      <Chip
        style={[{backgroundColor: 'cyan'}]}
        left={<Icon name="add" size={16} color="white" />}
        right={<Icon name="add" size={16} color="white" />}>
        Custom Chip
      </Chip>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	ButtonProps	--	Inherits properties from ButtonProps
checkIcon	ReactNode	--	Use any custom icon for selected state
isSelected	boolean	--	Set it to true if selected
withCheckIcon	boolean	--	Show the select icon
clearable	boolean	--	Show the close icon at right to clear the selection
viewOnly	boolean	--	Set it to true to make it unselectable
onClearPress	() => void	--	On clear callback
asBadge	boolean	--	Render it as a badge
mode	ButtonMode	filled	Change the appearance of the button using this
title	string	--	Button title text
titleStyle	StyleProp<TextStyle>	--	Title text style
style	StyleProp<ViewStyle>	--	Button style to add padding/margin etc.
isLoading	boolean	--	Set it to true to show the activity indicator to the left
disabled	boolean	--	Set to true to disable the button
disabledStyle	StyleProp<ViewStyle>	--	button style for disabled state
disabledTitleStyle	StyleProp<TextStyle>	--	button text style for disabled state
left	ReactNode	--	Render any icon/JSX on left of the title
right	ReactNode	--	Render any icon/JSX on right of the title
loaderProps	ActivityIndicatorProps	--	Loader props
status	BlossomStatus	primary	--
size	BlossomSize	medium	--