EndpointBadge

Hero example

When to use

Reach for <EndpointBadge> when documenting or labelling an HTTP endpoint — in code samples, recipe diagrams, API reference pages. The method takes the canonical method-palette colour (--method-{get,post,put,patch,delete}) so consumers can scan a list of endpoints by colour alone — but the text label is always present, so colour is supplemental, not the sole differentiator.

Omit the path prop to render verb-only mode — a stand-alone method chip suitable wherever V1 <VerbPill> was used. The chip's background tints to the method's --method-*-bg. The current V2 migration uses verb-only EndpointBadge as the canonical replacement for <VerbPill>.

Don't reach for EndpointBadge for non-HTTP labels — that's Pill or MonoChip. Don't use it as a button either; it's a label. Wrap the surrounding row in an anchor for navigation.

Anatomy

Two inline spans inside a .endpoint chip: a .method span (colour-coded by verb) followed by the path. In verb-only mode (path omitted), only the method span renders and the chip applies .endpoint-verb-only for the method-tinted background.

Props

Verb-only mode

<EndpointBadge method="GET" path="/v1/entities" />   {/* standard */}
<EndpointBadge method="POST" />                       {/* verb-only — replaces <VerbPill verb="POST"> */}

States

EndpointBadge has no states. Verb-only vs full-mode is configuration, not state.

Density

In compact, the chip height drops from 22 to 18px. Verb and path font sizes stay constant — legibility floor.

Themes

In dark, method colors shift to their dark-theme variants and the chip surface inverts. In forced-colors, method color collapses to HighlightText and the chip surface to Highlight — the text label preserves the semantic.

Tokens consumed

Method foreground reads --method-{verb}. Verb-only chip background reads --method-{verb}-bg. Chip surface (full mode) reads --code-surface.

Accessibility

• Keyboard interactions. None — the badge is non-interactive.
• ARIA roles and properties. Generic span. No role override. Method and path text supply the accessible name.
• Focus order. N/A.
• Screen-reader expectations. Announces verbatim — "POST /v1/entities" or "POST" (verb-only).
• Reduced motion. N/A.
• Forced colors. Method foreground → HighlightText; surface → Highlight. The text label remains intact.
• WIG rules. Color is supplemental, not sole. Mono caps via 0.04em letter-spacing on the method. Touch-action manipulation on the chip when wrapped in a link.

Do / Don't

Recipes

This component appears in:

• API recipe — every endpoint demo.
• Docs corpus recipe — API references inside agent replies.

Code example

import { EndpointBadge, CodeBlock } from "@matter/components";

export function CreateEntityEndpoint() {
  return (
    <CodeBlock
      header={
        <>
          <EndpointBadge method="POST" path="/v1/entities" />
          <span className="code-time">142ms</span>
        </>
      }
    >
      {/* request body */}
    </CodeBlock>
  );
}

Source