# Attachment: Trigger

> `<AttachmentTrigger />` makes the whole card clickable, for example to open a preview or a link, while the actions on it stay independent. Give it an `aria-label`.

Example: https://hextaui.com/docs/attachment/examples/trigger
Component docs: https://hextaui.com/docs/attachment.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/attachment-trigger.json
```

This adds `components/examples/attachment/trigger.tsx` with the Attachment component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/attachment/trigger.tsx"
import { IconDownload, IconFileZip, IconX } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
  AttachmentTrigger,
} from "@/components/ui/attachment"

export function AttachmentTriggerDemo() {
  return (
    <div className="flex flex-wrap justify-center gap-3">
      <AlertDialog>
        <Attachment>
          <AttachmentMedia>
            <IconFileZip />
          </AttachmentMedia>
          <AttachmentContent>
            <AttachmentTitle>research-summary.zip</AttachmentTitle>
            <AttachmentDescription>ZIP · 4.8 MB</AttachmentDescription>
          </AttachmentContent>
          <AttachmentActions>
            <AttachmentAction aria-label="Remove research-summary.zip">
              <IconX />
            </AttachmentAction>
          </AttachmentActions>
          <AlertDialogTrigger
            render={
              <AttachmentTrigger aria-label="Preview research-summary.zip" />
            }
          />
        </Attachment>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>research-summary.zip</AlertDialogTitle>
            <AlertDialogDescription>
              12 files · 4.8 MB · Uploaded today
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Close</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <Attachment>
        <AttachmentMedia variant="image">
          <img src="/preview/landscape.svg" alt="" />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>workspace.png</AttachmentTitle>
          <AttachmentDescription>Opens in a new tab</AttachmentDescription>
        </AttachmentContent>
        <AttachmentActions>
          <AttachmentAction aria-label="Download workspace.png">
            <IconDownload />
          </AttachmentAction>
        </AttachmentActions>
        <AttachmentTrigger
          render={
            <a
              href="/preview/landscape.svg"
              target="_blank"
              rel="noreferrer"
              aria-label="Open workspace.png"
            />
          }
        />
      </Attachment>
    </div>
  )
}
```

## Props in this example

### AttachmentMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"icon" \| "image"` | `"icon"` | image wraps its child in a square AspectRatio with a file icon fallback. |

### AttachmentTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button type="button">` |  |

## More Attachment examples

- [Image](https://hextaui.com/docs/attachment/examples/image.md)
- [States](https://hextaui.com/docs/attachment/examples/states.md)
- [Upload flow](https://hextaui.com/docs/attachment/examples/upload-flow.md)
- [Sizes](https://hextaui.com/docs/attachment/examples/sizes.md)
- [Long names](https://hextaui.com/docs/attachment/examples/long-names.md)
- [Group](https://hextaui.com/docs/attachment/examples/group.md)
- [Composer](https://hextaui.com/docs/attachment/examples/composer.md)
- [Broken image](https://hextaui.com/docs/attachment/examples/broken-image.md)
- [Stress](https://hextaui.com/docs/attachment/examples/stress.md)
- [Right to left](https://hextaui.com/docs/attachment/examples/rtl.md)