FolderTile

Animated folder button showing a fanned preview of up to three materials, an opening flap, selected styling, and an optional hover action slot. Visual state is derived from materials unless state is set; the folder leans open on hover (openOnHover) or when forced open as a drop target (open). All motion collapses to instant under reduced-motion preferences.

Usage

import { FolderTile, FolderTileEditIcon, FolderTileImageProps, FolderTileMaterial, FolderTileProps, FolderTileState } from "@desk/ui/components/folder-tile";

Best practices

Only the first three materials render in the fan; pass itemCount when the real total differs, otherwise the count shows materials.length.
Supply renderImage in Next.js so previews go through next/image — the default renders plain <img> from each material's src/alt.
Drive drag-and-drop drop-target styling with open (forces the open look without revealing the action); use selected+showSelectedState for selection, not manual classes.
FolderTile is itself the button — pass name/onClick and button props directly; don't wrap it in another <button>/<a>.

Props

Prop	Type	Description
action	`ReactNode`	Hover action rendered over the artwork, typically an edit/menu button.
actionVisible	`boolean`	Keeps the action and open visual state visible while an external menu/popover is open.
animateEmptyIcon	`boolean`	Whether the empty-folder plus icon rotates on hover.
className	`string`
itemCount	`number`	Count displayed after the folder name. Defaults to `materials.length`.
materials	`FolderTileMaterial[]`	Material previews. The component renders at most the first three.
name(required)	`string`	Folder label.
open	`boolean`	Forces the open visual state regardless of hover — e.g. while a draggable item hovers over the folder as a drop target. Does not reveal the action.
openOnHover	`boolean`	Whether filled folders transition into the open state on hover.
renderImage	`(props: FolderTileImageProps) => ReactNode`	Custom image renderer for frameworks such as Next.js.
selected	`boolean`
showSelectedState	`boolean`	Whether selected styling is rendered when `selected` is true.
state	`FolderTileState`	Explicit visual state. When omitted, derived from material count.
testId	`string`

Also exports

componentFolderTileEditIcon
typeFolderTileImageProps
interfaceFolderTileMaterial
interfaceFolderTileProps
typeFolderTileState

Composition

Builds on

CardFan