Components
Loading preview...
The Tooltip Button is a shadcn/ui component that combines a standard button with a hover-triggered tooltip to provide additional context or guidance for users. It is perfect for icon-only buttons or actions that may not be immediately clear, as the tooltip explains the button’s purpose without cluttering the interface. The component supports optional icons, flexible text labels, and configurable sizes (sm, md, lg), making it highly adaptable for dashboards, toolbars, or any interactive UI. By using shadcn/ui primitives, it ensures accessibility, smooth animations, and a consistent, modern design.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/tooltip-buttonimport TooltipButton from "@/components/ui/tooltip-button"
export default function DemoTooltipButton() {
return (
<div className="flex gap-4">
<TooltipButton label="Info" tooltip="More information about this action" />
<TooltipButton label="Help" tooltip="Get help or documentation" size="lg" />
<TooltipButton label="Settings" tooltip="Adjust your preferences" size="sm" />
</div>
);
}