Chip

A chip is a small block of information, typically used to represent a category.

💬 Feedback 🎨 Material Design

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: Color;

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