Skip to main content

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