Filter your inbox
starred messages are shown.
Android chip
A Material filter chip with a filled selection state and a checkmark.
Preview
In action
When to use
Use it for
- Independent filters that users can select and clear.
Not for
- Mutually exclusive navigation or status labels with no action.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { AndroidChip } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-chip.
2. Vendor the source
npx @noorddev/vlak-cli add android-chip
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/android-chip.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { AndroidChip } from "@noorddev/vlak-react";
<AndroidChip selected={unread} onSelectedChange={setUnread}>Unread</AndroidChip>Props
AndroidChip
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | ||
defaultSelected | boolean | false | |
onSelectedChange | (selected: boolean) => void | ||
icon | ReactNode |
Also accepts ButtonHTMLAttributes<HTMLButtonElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses each enabled filter. |
| Enter or Space | Toggles the focused filter. |
Accessibility
- A native button exposes selection through aria-pressed.
- The checkmark and filled surface distinguish selection without hue.
- The compact chip keeps a 48-pixel hit area.
Markup
<button class="rs-android-chip rs-android-chip-selected" type="button" aria-pressed="true"><span class="rs-android-chip-icon" aria-hidden="true">✓</span>Unread</button>
Classes
.rs-android-chip.rs-android-chip-selected.rs-android-chip-icon