Shadcn.io is not affiliated with official shadcn/ui
Tooltip with Icon
A tooltip with icon and text content using flex items-center gap-2 layout with CheckCircleIcon from Lucide React for status indicators
Text alone does not always convey meaning—icons add visual context instantly. This React tooltip pattern combines Lucide React icons with text using flex items-center layout for inline status messages. Built with shadcn/ui Tooltip and Radix UI primitives with size-4 icons and text-primary-foreground color, the icon-text combination provides quick visual confirmation—perfect for system status, health checks, validation states, connection indicators, sync status, or any interface element where an icon plus brief text communicates state faster than text alone.
Tooltip with Icon preview
Installation
Related Components
Basic Tooltip
Simple single-line tooltip text
Tooltip with Title
Tooltip with structured title and description
Tooltip with Keyboard Shortcut
Tooltip showing keyboard command
Badge with Icon
Badge component with icon indicator
Alert with Icon
Alert message with status icon
Button with Icon
Button containing icon and text
FAQ
Was this page helpful?
Sign in to leave feedback.
Single Selection Toggle Group
Single selection toggle group using type="single" for radio button behavior allowing only one active item with mutually exclusive choices
Tooltip with Image
A tooltip with image preview showing 257x150px thumbnail with title and description using max-w-xs and p-0 for edge-to-edge image display