Chip – Once UI

Chip is a rounded label for filters, tags and choices. It is drawn in the brand colour when selected, which is the default, and becomes a button when it has onPress. See the web Chip for the same component in the browser.

State

Toggle selected in onPress to use chips as filters.

Filters.tsx

import { useState } from "react";
import { Chip, Row } from "@once-ui-system/native";

const FILTERS = ["Vegan", "Spicy", "Gluten free"];

export function Filters() {
const [on, setOn] = useState<string[]>(["Vegan"]);
const toggle = (f: string) =>
  setOn(on.includes(f) ? on.filter((x) => x !== f) : [...on, f]);
return (
  <Row gap="8" wrap>
    {FILTERS.map((f) => (
      <Chip key={f} label={f} selected={on.includes(f)} onPress={() => toggle(f)} />
    ))}
  </Row>
);
}

Prefix icon

prefixIcon takes an icon name, or any element.

Verified.tsx

import { Chip } from "@once-ui-system/native";

export function Verified() {
return <Chip label="Verified" prefixIcon="check" />;
}

Removable

onRemove adds a close button labelled "Remove" and the chip's label.

Recipients.tsx

import { useState } from "react";
import { Chip, Row } from "@once-ui-system/native";

export function Recipients() {
const [people, setPeople] = useState(["Ana", "Ben", "Chen"]);
return (
  <Row gap="8" wrap>
    {people.map((p) => (
      <Chip
        key={p}
        label={p}
        selected={false}
        onRemove={() => setPeople(people.filter((x) => x !== p))}
      />
    ))}
  </Row>
);
}

Differences from the web

onPress and core's onClick both work. A chip with neither is not a button.
There is no iconButtonProps.

API reference

Prop	Type	Default	Description
label	string		The chip's text. Required.
selected	boolean	true	Draws the chip in the brand colour.
prefixIcon	IconSlot		An icon name, or any element, before the label.
onRemove	() => void		Shows a remove button.
onPress	() => void		Makes the chip a button.
onClick	() => void		Core's name for onPress. Used when onPress is not set.
style	ViewStyle		Style for the chip.