Chip

DefaultFilledSmall outlineTag alias

astro󰔦react󰔦tokens󰔦

Import

import { Chip, Tag } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/ChipExample.tsx

import { useState } from "react";
import { Chip, Stack, Tag } from "@pelagornis/page/components";

export default function ChipDemo() {
  const [filters, setFilters] = useState(["astro", "react", "tokens"]);

  return (
    <Stack gap="sizeMedium">
      <Stack direction="row" gap="sizeSmall" wrap>
        <Chip>Default</Chip>
        <Chip variant="filled">Filled</Chip>
        <Chip variant="outline" size="sm">
          Small outline
        </Chip>
        <Tag variant="outline">Tag alias</Tag>
      </Stack>
      <Stack direction="row" gap="sizeSmall" wrap>
        {filters.map((filter) => (
          <Chip key={filter} onRemove={() => setFilters((current) => current.filter((item) => item !== filter))}>
            {filter}
          </Chip>
        ))}
      </Stack>
    </Stack>
  );
}

Use in MDX

Chip can be written straight in an .mdx page. Import it below the frontmatter. It renders on the server, so no client directive is needed.

src/content/docs/example.mdx

---
title: Example
---

import { Chip } from "@pelagornis/page/components";

<Chip variant="filled">Astro</Chip>
<Chip variant="outline" size="sm">React</Chip>

Use in Markdoc

pageMarkdoc() registers a chip tag for this component. Add the preset once in markdoc.config.mjs (see Use in Markdoc), then write the tag in any .mdoc page.

src/content/docs/example.mdoc

{% chip variant="filled" %}Astro{% /chip %}

Attributes use the same names and values as the React props.

Variants

Values the component accepts for each variant prop.

Prop	Values
variant	default outline filled
size	sm md lg

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	chip
remove	chip-remove

States

States the component styles. Component states are exposed as data attributes.

Kind	States
Pseudo	focus-visible

Keyboard

Keys the component handles when it has focus.

Key	Action
Enter	activate
Space	activate

Reference

• RefineUI · Chip for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.