# Figure

A native figure that keeps media and its caption together.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Figure, Surface } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Figure caption="A calm foundation for the next idea."><Surface padding="6">Project preview</Surface></Figure>
    </FloodRoot>
  );
}
```

## Design notes

- Composes native figure and figcaption. The host supplies the image, chart, code or other self-contained content, including its own alt text or accessible name.
- captionPosition controls DOM reading order as well as placement. Caption content may contain links. Native hidden, dir, lang, style and ref target the figure.
- Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `caption` | `ReactNode` | `—` |
| `captionPosition` | `"before" \| "after"` | `"after"` |
| `Native HTML props` | `HTMLAttributes<HTMLElement>` | `Forwarded` |