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
API Reference
Generated from the component's exported types.
ImagesBadgeProps
| Prop | Type | Default | Description |
|---|---|---|---|
ref | Ref<HTMLAnchorElement | HTMLDivElement> | — | — |
text* | string | — | Label drawn next to the folder. |
images* | string[] | — | Image URLs. At most three are shown. |
className | string | — | — |
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. |
