Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - Multiple Action Buttons
A React input field with multiple action buttons for info and favorite actions using separate InputGroupAddon components built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
One button isn't always enough. This React input group adds multiple action buttons—InfoIcon for details and HeartIcon for favoriting with fill toggle. Built with shadcn/ui InputGroup using separate InputGroupAddon components with inline-end alignment, it's perfect for bookmark managers, link collections, product listings, or any interface where users need quick access to multiple actions on a single value without cluttering the layout.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Copy Button
Input with single copy button
Clear Button
Input with clear/reset button
Password Toggle
Input with visibility toggle button
AI Prompt Input
AI input with multiple controls
Icon Button
Icon-only button styles
Input with Badge
Input with custom badge addon
Questions you might have
React Input Group - Copy Button
A React input field with copy button that toggles between copy and check icons showing visual feedback built with shadcn/ui InputGroup
React Input Group - Search Button
A React search input with labeled button combining text and icon using secondary variant built with shadcn/ui InputGroup components