Photonix UI - React Components, Templates & Figma Design System

Attachment

A compact preview chip for attached files, images, videos, and links used inside form fields or input areas.

Preview

Usage

import { Attachment } from '@photonix/ultimate';

Component API

Attachment

Prop	Type	Default	Description
type	`AttachmentType`	`-`	Loại attachment
name	`string`	`-`	Tên hiển thị
previewUrl	`string`	`-`	URL preview (thumbnail image/video, OG image cho link)
href	`string`	`-`	URL đích cho link type
domain	`string`	`-`	Domain hiển thị cho link type (ví dụ: "youtube.com")
fileSize	`number`	`-`	Kích thước file (bytes) — auto format
size	`AttachmentSize`	`'md'`	Size variant
onRemove	`(() => void)`	`-`	Callback khi nhấn remove
disabled	`boolean`	`-`	Disabled
className	`string`	`-`	className
borderRadius	`string`	`-`	Tùy chỉnh bo góc (ví dụ: "12px" hoặc dùng token "var(--radius-md)")
style	`React.CSSProperties`	`-`	style

Variants

Basic Usage

The most common usage is rendering an image or file attachment with a remove action.

Basic Usage

<Attachment
    type="image"
    name="example_photo.jpg"
    previewUrl="https://picsum.photos/200/200?random=1"
    fileSize={1048576}
    onRemove={() => console.log('Remove clicked')}
/>

Sizes

Attachment comes in small (sm), medium (md, default), and large (lg) sizes.

Sizes

<Flex gap="md" align="start">
    <Attachment size="sm" type="image" name="small.jpg" previewUrl="..." />
    <Attachment size="md" type="image" name="medium.jpg" previewUrl="..." />
    <Attachment size="lg" type="image" name="large.jpg" previewUrl="..." />
</Flex>

Types

Different types of attachments have distinct visual indicators and fallbacks when preview images are not available.

Photonix Design Systemphotonix.dev

Q3_Financial_Report.pdf2.3 MB

Types

<Flex gap="md" align="start" style={{ flexWrap: 'wrap' }}>
    <Attachment type="video" name="demo.mp4" previewUrl="..." />
    <Attachment type="link" name="Photonix Docs" domain="photonix.dev" href="..." previewUrl="..." />
    <Attachment type="file" name="report.pdf" fileSize={2457600} />
    <Attachment type="video" name="no_thumbnail.mp4" fileSize={15728640} />
</Flex>

Attachment

Preview

Component API

Attachment

Variants

Basic Usage

Sizes

Types

On this page