Premium & Brand

Images Badge

A folder badge that fans preview images on hover.

Import

tsx

import { ImagesBadge } from "@cronus-ui/ui";

bash

npx cronus-ui add images-badge

Examples

Folder

A manila folder that fans up to three preview images on hover, then flattens the front. Same spring as Aceternity (`stiffness: 400`, `damping: 25`).

Introducing Agenforce Marketing Template

tsx

<ImagesBadge
  text="Introducing Agenforce Marketing Template"
  images={[
    "https://assets.aceternity.com/pro/agenforce-1.webp",
    "https://assets.aceternity.com/pro/agenforce-2.webp",
    "https://assets.aceternity.com/pro/agenforce-3.webp",
  ]}
/>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

ImagesBadgeProps

Prop	Type	Default	Description
`ref`	`Ref<HTMLAnchorElement \| HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`text`*	`string`	—	Label drawn next to the folder.
`images`*	`string[]`	—	Image URLs. At most three are shown.
`className`	`string`	—	Additional class names merged onto the root.
`href`	`string`	—	Optional link. When set, the root renders as an anchor.
`target`	`string`	—	Anchor target. `noopener noreferrer` is added when this is `"_blank"`.
`folderSize`	`{ width: number; height: number }`	`{ width: 32, height: 24 }`	Folder size in pixels.
`teaserImageSize`	`{ width: number; height: number }`	`{ width: 20, height: 14 }`	Peeking image size in pixels.
`hoverImageSize`	`{ width: number; height: number }`	`{ width: 48, height: 32 }`	Hovered image size in pixels.
`hoverTranslateY`	`number`	`-35`	How far images translate up on hover, in pixels.
`hoverSpread`	`number`	`20`	Horizontal fan spread on hover, in pixels.
`hoverRotation`	`number`	`15`	Fan rotation on hover, in degrees.
`imageAlts`	`string[]`	—	Accessible names for the preview images, in display order.