---
title: Capabilities Badges
description: Renders each adapter capability from capabilities() as a supported or unsupported badge - driven by useFiles, with a supportedOnly filter.
---

Reads [`capabilities()`](/docs/capabilities) once and renders each adapter feature as a badge: a check when supported, a cross when not. Handy for showing users what their backend can do, and as a building block for gating actions — hide a "share link" button when `Signed URLs` is unsupported, skip range planning when `Range reads` is off.

<Component path="capabilities-badges/examples/capabilities-badges-basic" />

## Installation

<ComponentInstall name="capabilities-badges" />

## Usage

```tsx lineNumbers
import { useFiles } from "files-sdk/react";

import { CapabilitiesBadges } from "@/components/files-sdk/capabilities-badges";

export function Backend() {
  const files = useFiles({ endpoint: "/api/files" });

  return <CapabilitiesBadges files={files} supportedOnly />;
}
```

The same `capabilities()` snapshot the gateway exposes drives this — so what you see is exactly what `url()`, `download({ range })`, `list({ delimiter })` and friends will actually do at runtime. Pass `supportedOnly` to drop the unsupported rows entirely.

## Props

<AutoTypeTable
  path="registry/files-sdk/capabilities-badges/capabilities-badges.tsx"
  name="CapabilitiesBadgesProps"
/>