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.
Tooltip with Title and Description
A tooltip with structured content showing title in font-semibold and description in text-xs using flex-col gap-1 layout
Tooltip with Keyboard Shortcut
A tooltip showing keyboard shortcut with Kbd component using flex items-center gap-2 layout displaying command key combinations