---
title: Chip
description: A toggle for a filter or a preset. Turns dark when on.
---

```tsx
import { Chip } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function ChipBasic() {
  return (
    <Preview>
      <Chip.Root defaultPressed={true}>Option 1</Chip.Root>
      <Chip.Root>Option 2</Chip.Root>
      <Chip.Root>Option 3</Chip.Root>
    </Preview>
  );
}
```

- Chips sit in a row above the content they filter.
- Use chips for a few presets. When there are more than six, use a [Select](/deft/components/select).

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `pressed?` | `boolean` | - | |
| `defaultPressed?` | `boolean` | - | |
| `onPressedChange?` | `(pressed: boolean, eventDetails) => void` | - | |

Parts: `Root`. Other props go to the native `button`. Built on Base UI [Toggle](https://base-ui.com/react/components/toggle).