Compose FAB Collapse

FreeNew

An extended Compose button that shrinks to an icon while the list scrolls down and grows back on the way up, always keeping its name for screen readers. Use this when a phone list screen has one dominant create action that should stay reachable without covering the content.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

children

Guide and examples

When to use it

Use it when a phone list screen has one dominant create action that should stay reachable without covering the content.

Do not use it for screens with several equal actions (use a speed dial) or short screens that do not scroll.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/compose-fab-collapse.json

It composes @tealmac/fab, which the CLI installs for you.

Usage

import { ComposeFabCollapse } from "@/components/compose-fab-collapse"

<div className="grid gap-2">
  <ComposeFabCollapse onCompose={() => setCount((n) => n + 1)}>
    <ul className="divide-y px-4">
      {Array.from({ length: 20 }, (_, i) => (
        <li key={i} className="py-3">
          Draft {i + 1}
        </li>
      ))}
    </ul>
  </ComposeFabCollapse>
  <p role="status" className="text-sm">
    Drafts started: {count}
  </p>
</div>

Props

Prop	Type	Default	Description
`label`	`string`	`"Compose"`	Name and text of the button.
`onCompose`	`() => void`	`required`	Called when pressed.
`children`	`ReactNode`	`required`	The scrolling content.

Accessibility

The button keeps its accessible name when collapsed; the label becomes aria-label.
It is a real button with focus ring, 56px tall, positioned inside the safe area.
Width changes are not animated with reduced motion.

Testing

The pattern ships with a Testing Library test (compose-fab-collapse.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone list screen has one dominant create action that should stay reachable without covering the content.

Do not use it for screens with several equal actions (use a speed dial) or short screens that do not scroll.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/compose-fab-collapse.json

It composes @tealmac/fab, which the CLI installs for you.

Usage

import { ComposeFabCollapse } from "@/components/compose-fab-collapse"

<div className="grid gap-2">
  <ComposeFabCollapse onCompose={() => setCount((n) => n + 1)}>
    <ul className="divide-y px-4">
      {Array.from({ length: 20 }, (_, i) => (
        <li key={i} className="py-3">
          Draft {i + 1}
        </li>
      ))}
    </ul>
  </ComposeFabCollapse>
  <p role="status" className="text-sm">
    Drafts started: {count}
  </p>
</div>

Props

Prop	Type	Default	Description
`label`	`string`	`"Compose"`	Name and text of the button.
`onCompose`	`() => void`	`required`	Called when pressed.
`children`	`ReactNode`	`required`	The scrolling content.

Accessibility

The button keeps its accessible name when collapsed; the label becomes aria-label.
It is a real button with focus ring, 56px tall, positioned inside the safe area.
Width changes are not animated with reduced motion.

Testing

The pattern ships with a Testing Library test (compose-fab-collapse.test.tsx) that drives it through roles and the keyboard.