---
title: Capabilities Badges
description: Surfaces what the configured storage adapter can do as a row of badges — driven by useFiles.
---

Reads [`capabilities()`](/api/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.

<ComponentPreview name="capabilities-badges/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"
/>