Glowup
ACTIONS · 14 / 89
Chip
Chip — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/Chip.tsx
Live demo
Properties
5 controls
Label
Selected
Mode
Filled
󰍝
Size
Medium
󰍝
Disabled
Usage
Chip.tsx
<Chip label="React Native" />
Variants
The states and shapes this component is meant to be used in.
Modes
Filter row
Filter invoices
Removable
Recipients
󰇰
marta.rossi@example.com
󰭘
Design team
QA
Sizes
Disabled
Locked tag
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
11 on ChipProps
Filter props
󰍉
label
required
string
accessibilityRole
"button" | "radio" | "checkbox"
Overrides the role of a pressable chip (`"button"`). A chip that toggles inside a group is a `"radio"` or a `"checkbox"`, and then reports `selected` as checked.
disabled
boolean
default: false
feedback
boolean
default: true
Report presses: a `"checkbox"` chip toggles, a `"radio"` one selects to `ThemeProvider`'s `onInteractionFeedback` (haptics). Defaults to true.
icon
MaterialCommunityIconsGlyphs
mode
"filled" | "tonal" | "outlined"
default: "filled"
onClose
() => void
onPress
() => void
selected
boolean
default: false
size
"small" | "medium"
default: "medium"
"small" renders a compact 24px chip.
style
object
default: {}