Skip to content
Compositions

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 "@instruments/materia-ui/compositions/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

PropTypeDefaultDescription
actionReactNode

Hover action rendered over the artwork, typically an edit/menu button.

actionVisibleboolean

Keeps the action and open visual state visible while an external menu/popover is open.

animateEmptyIconboolean

Whether the empty-folder plus icon rotates on hover.

classNamestring
itemCountnumber

Count displayed after the folder name. Defaults to materials.length.

materialsFolderTileMaterial[]

Material previews. The component renders at most the first three.

name(required)string

Folder label.

openboolean

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.

openOnHoverboolean

Whether filled folders transition into the open state on hover.

renderImage(props: FolderTileImageProps) => ReactNode

Custom image renderer for frameworks such as Next.js.

selectedboolean
showSelectedStateboolean

Whether selected styling is rendered when selected is true.

stateFolderTileState

Explicit visual state. When omitted, derived from material count.

testIdstring

Also exports

  • componentFolderTileEditIcon
  • typeFolderTileImageProps
  • interfaceFolderTileMaterial
  • interfaceFolderTileProps
  • typeFolderTileState

Composition

Builds on

Center, Flex, SwatchFan