Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Combobox - Items with Action Buttons
A React combobox with inline action Button components using ExternalLink icon and stopPropagation for secondary actions within CommandItem elements with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Selection plus action—combine browsing with doing. This React combobox embeds size icon Button with ExternalLink icon from Lucide React using stopPropagation preventing item selection when clicking action. Built with shadcn/ui Command and Popover featuring justify-between layout separating item content from action button. The action button pattern enables contextual operations—perfect for repository browsers, link collections, resource pickers, or anywhere items have secondary actions letting users preview, open, or execute without selecting through embedded interactive controls.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Items with Descriptions
Two-line text layout
Footer Actions with Settings
Footer-level action buttons
Items with Status Indicators
Badge indicators per item
Items with Icons and Descriptions
Icon plus text layout
Standard Button
Basic button component
Standard Combobox
Simple text-only combobox
Questions you might have
React Combobox - Color-Coded Items
A React combobox with color-coded items using size-3 rounded-full colored dots for visual category differentiation with Tailwind background colors and shadcn/ui
React Combobox - Simple Single Select
A foundational single-select React combobox with searchable dropdown using Command component and Popover for framework selection with shadcn/ui