# FloatingIconButton

A round action pinned to a screen corner.

- Group: Actions
- Import: `import { FloatingIconButton } from '@misoto22/folio'`
- Page: https://ui.misoto22.com/components/floating-icon-button/
- Related: button

## When to reach for it

A page-level affordance that must stay reachable while the reader scrolls — back to top, a mobile table of contents.

## Anatomy

- **Control box** (required) — A real <button type="button">, --control-h-md square with a pill radius, position: fixed to a bottom corner at --z-drawer. There is no asChild and no href here: it cannot become a link.
- **Icon** (required) — children, and the only thing in the box. Nothing text-shaped renders, so the control is as wide as the square and no wider.
- **Ground** (required) — A 90% --paper fill over a backdrop blur, with a --rule-2 hairline. The White Reset has no elevation ramp, so the blur and the hairline are what lift it off the page — not a shadow.
- **Name** (required) — label, set as aria-label. It never renders, so a screen reader has the name and a sighted reader has the glyph alone.

## Best practices

### Do

- Spell out position — it is required and has no default, and the values are start and end in reading order. The component’s own doc example says position="right", which is not one of them and does not type-check.
- Wrap it in a Tooltip when the glyph is not universal: label is aria-label only, so it names the control for a screen reader and for nobody else — and a tooltip does not open on touch, which is where a floating control is most often the only affordance on screen.
- Keep it to two. start is deliberately raised to 5rem while end sits at 1.5rem, which is exactly enough clearance for a pair; a third has nowhere left to go, and the corners already compete with a cookie bar and a chat launcher.
- Move it with className when the page has a fixed footer — the classes go through tailwind-merge, so className="bottom-24" REPLACES the corner offset rather than losing to it.

### Don’t

- --control-h-md is 44px at the default density and 36px under data-density="compact", so a compact page ships the one control a thumb reaches for without looking at eight pixels under the WCAG 2.5.5 floor.
- It is position: fixed, so any ancestor with a transform, filter or backdrop-filter becomes its containing block — put one inside a DialogContent, which centres itself with a translate, and it pins to the panel’s corner instead of the screen’s.
- It sits at --z-drawer, 100, and every rank that can appear over it is higher: a scrim is 200, a modal 210, an anchored panel 220 — --z-dropdown now resolves to --z-anchored, not to this rank. So a menu opening into the same corner covers the button outright rather than tying with it, and a dialog covers it too. Nothing here is settled by document order; move the button with className if it must stay reachable beside something else.

## Accessibility

- label is the only name the control has; it is required rather than optional.
- 44px square, which is the pointer-target floor (WCAG 2.5.8).

## FloatingIconButton

A round action pinned to a screen corner. A translucent paper ground with a backdrop blur rather than a drop shadow — the White Reset has no elevation ramp, so what separates the control from the page under it is the blur and the hairline, not a glow.

### Props

- `position` (required) — `'start' | 'end'`. Which bottom corner the control is pinned to, in READING order — `end` is the right in English and the left in Arabic. Naming the sides `left`/`right` would have hard-coded one script's layout into the API.
- `label` (required) — `string`. Accessible name — the button has no visible text, so this is its only name.
- `children` (required) — `ReactNode`.

Also accepts: `Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>`.

## Example — back to top

```tsx
import { FloatingIconButton } from '@misoto22/folio'

<div className="relative h-32 w-full overflow-hidden rounded-(--radius) border border-(--rule) [&>button]:absolute">
  <FloatingIconButton position="end" label="Back to top">
    <RiArrowUpLine size={16} aria-hidden />
  </FloatingIconButton>
</div>
```

## Example — a tooltip name

```tsx
import { FloatingIconButton, Tooltip, TooltipProvider } from '@misoto22/folio'

<TooltipProvider>
  <div className="relative h-32 w-full overflow-hidden rounded-(--radius) border border-(--rule) [&>button]:absolute">
    <Tooltip content={name} side="top">
      <FloatingIconButton position="end" label={name}>
        <RiNodeTree size={16} aria-hidden />
      </FloatingIconButton>
    </Tooltip>
  </div>
</TooltipProvider>
```

## Example — two corners

```tsx
import { FloatingIconButton } from '@misoto22/folio'

<div className="relative h-40 w-full overflow-hidden rounded-(--radius) border border-(--rule) [&>button]:absolute">
  <FloatingIconButton position="start" label="Open the chat">
    <RiChat3Line size={16} aria-hidden />
  </FloatingIconButton>
  <FloatingIconButton position="end" label="Back to top">
    <RiArrowUpLine size={16} aria-hidden />
  </FloatingIconButton>
</div>
```