Chip

import { Chip } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	—
colorScheme	"blue" | "teal" | "yellow" | "pink" | "purple" | "cyan" | "orange" | "green" | "red" | "gray" | "indigo" | "violet" | "fuchsia" | "rose" | "emerald"	—	One of the 15 CHIP_COLORS keys, or a full scheme object.
size	"smallest" | "small" | "medium" | "large"	—
outlined	boolean	—
error	boolean	—
icon	React.ReactNode	—
className	string	—
onClick	React.MouseEventHandler<HTMLDivElement>	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Chip } from "@rebasepro/ui";

// The 15 real CHIP_COLORS keys. NOTE: UIReferenceView passes "purpleDark" /
// "blueDark", which are NOT keys of CHIP_COLORS — those chips fall through to
// the default scheme. Use the keys below.
const SCHEMES = ["blue", "teal", "red", "green", "yellow", "orange", "purple",
    "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"] as const;

export const ColorSchemes = () => (
    <div className="flex flex-wrap gap-2 p-4 max-w-[520px]">
        {SCHEMES.map(s => <Chip key={s} colorScheme={s}>{s}</Chip>)}
    </div>
);