Chip
A chip is a small block of information, typically used to represent a category.
Import
import { Chip } from "@react-native-material/core";
Usage
Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.
Props
label
The text to display in the chip.
Type: string | React.ReactNode | ((props: { color: string }) => React.ReactNode | null) | null;
Optional: No
leading
The element placed before the label.
Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
Optional: Yes
trailing
The element placed after the label.
Type: React.ReactNode | ((props: { color: string; size: number }) => React.ReactNode | null) | null;
Optional: Yes
variant
The variant of the chip. - filled: A filled chip. - outlined: A solid background with a border.
Type: "filled" | "outlined";
Default: "filled"
Optional: Yes
color
The color of the chip.
Type: PaletteColor;
Optional: Yes
contentContainerStyle
The style of the chip's container.
Type: PressableProps["style"];
Optional: Yes
labelStyle
The style of the chip's label.
Type: StyleProp<TextStyle>;
Optional: Yes
leadingContainerStyle
The style of the chip's leading element.
Type: StyleProp<ViewStyle>;
Optional: Yes
trailingContainerStyle
The style of the chip's trailing element.
Type: StyleProp<ViewStyle>;
Optional: Yes
...ViewProps, ...PressableProps, ...PressableProps