Agent Elements

AttachmentButton

Render the round plus attachment trigger used by InputBar. Use onClick to open your picker action.

Getting Started
$pnpm dlx shadcn@latest add https://agent-elements.21st.dev/r/attachment-button.json
Examples
Default
Without handler
Source

Copy and paste the following code into your project, or run the install command above to pull it in automatically.

components/input/attachment-button.tsx
import { memo } from "react";
import { IconPlus } from "@tabler/icons-react";

export type AttachmentButtonProps = {
  onClick?: () => void;
};

export const AttachmentButton = memo(function AttachmentButton({
  onClick,
}: AttachmentButtonProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="size-7 rounded-full flex items-center justify-center hover:bg-muted transition-colors cursor-pointer"
      aria-label="Attach"
    >
      <IconPlus
        className="w-4 h-4 text-neutral-400 dark:text-neutral-600"
        strokeWidth={2}
      />
    </button>
  );
});
API reference
Prop
Type
Required
onClick
() => void
No