Chip

A row of filters

Press a chip. The pressed one is filled; the red one is an alarm filter.

<KbChip on={filter === "open"} onClick={…}>Open</KbChip>
<KbChip on={filter === "breached"} alarm onClick={…}>Breached</KbChip>

When to use

• Use chips to filter a list or switch a view, with the result visible straight away.
• A control that filters is a chip even if it looks like a status.
• Keep chips to one or two words. Show the count in a badge inside only when it helps.
• Alarm marks the filter that needs a person now, such as Breached.

Import

import { KbChip } from "@/components/ui/KbBadge";

<KbChip on={filter === "mine"} onClick={() => setFilter("mine")}>Assigned to you</KbChip>

Props

Keyboard and screen readers

• A real button with aria-pressed, so assistive tech announces pressed or not pressed.
• Pressed is shown by fill and weight as well as colour.
• Space and Enter press it; focus shows the shared ring.