Primitives

Chip

Toggleable tag — 28px pill. Pressed state flips to ink/ink-foreground. Optional remove button.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

import { Chip } from "@/components/br/primitives";

<Chip>react</Chip>
<Chip onRemove={() => remove()}>tokens</Chip>
<Chip pressed>selected</Chip>

// toggleable
<Chip pressed={selected.has(t)} onPressedChange={() => toggle(t)}>
  {t}
</Chip>

Props

PropTypeDefaultDescription
pressedboolean—Active state — fills with ink.
onPressedChange(p: boolean) => void—Fires on click.
onRemove() => void—If provided, shows an X icon.