Photonix

Attachment

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

Preview

Project brief.pdf2.3 MB
Usage
"use client";

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

export default function AttachmentPreviewExample() {
    return <Attachment type="file" name="Project brief.pdf" fileSize={2400000} size="md" onRemove={() => undefined} />;
}

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
"use client";

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

export default function AttachmentBasicExample() {
    return (
        <Stack gap="sm">
            <Attachment type="file" name="Project brief.pdf" fileSize={2400000} size="md" onRemove={() => undefined} />
            <Attachment type="link" name="Design reference" domain="figma.com" href="https://figma.com" size="md" />
            <Attachment type="video" name="Launch walkthrough.mp4" fileSize={48000000} size="lg" />
        </Stack>
    );
}

Sizes

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

small.jpg
medium.jpg
large.jpg
Sizes
"use client";

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

export default function AttachmentSizesExample() {
    return (
        <Flex gap="md" align="start">
            <Attachment
                size="sm"
                type="image"
                name="small.jpg"
                previewUrl="https://picsum.photos/200/200?random=2"
                onRemove={() => undefined}
            />
            <Attachment
                size="md"
                type="image"
                name="medium.jpg"
                previewUrl="https://picsum.photos/200/200?random=3"
                onRemove={() => undefined}
            />
            <Attachment
                size="lg"
                type="image"
                name="large.jpg"
                previewUrl="https://picsum.photos/200/200?random=4"
                onRemove={() => undefined}
            />
        </Flex>
    );
}

Types

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

Types
"use client";

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

export default function AttachmentTypesExample() {
    return (
        <Flex gap="md" align="start" wrap="wrap">
            <Attachment
                type="video"
                name="demo_recording.mp4"
                previewUrl="https://picsum.photos/200/200?random=5"
                fileSize={15728640}
                onRemove={() => undefined}
            />
            <Attachment
                type="link"
                name="Photonix Design System"
                domain="photonix.dev"
                href="https://photonix.dev"
                previewUrl="https://picsum.photos/200/200?random=6"
                onRemove={() => undefined}
            />
            <Attachment
                type="file"
                name="Q3_Financial_Report.pdf"
                fileSize={2457600}
                onRemove={() => undefined}
            />
            <Attachment
                type="video"
                name="video_no_thumbnail.mp4"
                fileSize={10485760}
                onRemove={() => undefined}
            />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Basic Usage
Sizes
Types
Photonix UI - React Components, Templates & Figma Design System