Chip

A toggle for a filter or a preset. Turns dark when on.

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.

API

PropType

pressed?boolean

Typeboolean

defaultPressed?boolean

Typeboolean

onPressedChange?(pressed: boolean, eventDetails) => void

Type(pressed: boolean, eventDetails) => void

Parts: Root. Other props go to the native button. Built on Base UI Toggle.