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
Blossom Chip
function ChipViewOnly() {
return <Chip viewOnly>Blossom Chip</Chip>
}
ChipWithoutCheckIcon
Blossom Chip
function ChipWithoutCheckIcon() {
return <Chip withCheckIcon={false}>Blossom Chip</Chip>
}
ChipClearable
Blossom Chip
function ChipClearable() {
return <Chip clearable>Blossom Chip</Chip>
}
ChipCheckIcon
Custom Icon
function ChipCheckIcon() {
return (
<Chip checkIcon={<Icon name="information-sharp" size={16} />}>
Custom Icon
</Chip>
)
}
ChipAsBadge
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>
)
}
ChipModesSizesMobile
tinted
tinted
tinted
tinted
tinted
tinted
tinted
tinted
tinted
tinted
tinted
tinted
ChipAllStatuses
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 | -- |