Components · Labels & Badges

Chip

StableSince v0.0.1

Compact label chip, optionally dismissible.

import { Chip } from '@nexub/react';

Examples

Props
Prop	Type	Default	Description
variant	'filled' \| 'outline'	'filled'	Visual style of the chip.
onRemove	() => void	—	When provided, renders a dismiss button that calls this handler.
size	'sm' \| 'md'	—	Controls chip size.

@nexub/react-nativeAlpha

import { Chip } from '@nexub/react-native';

<Chip label="Food" selected={on} onPress={toggle} />

Same tokens and prop names. Where the platforms differ:

Chip: web vs mobile
	Web	iOS & Android
Hit area	Visual size; xs/sm controls meet WCAG 2.5.8 (24px).	Always 44pt, extended with hitSlop when the visual is smaller.

Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.

Chip props (React Native)
Prop	Type	Default	Description
labelrequired	string	—	—
selected	boolean	—	Toggle state (filter chips).
onPress	() => void	—	—
onRemove	() => void	—	Shows a remove button (its label is messages.remove).
leadingIcon	React.ComponentType<NativeIconProps>	—	—
disabled	boolean	—	—
style	StyleProp<ViewStyle>	—	—