Components
Loading preview...
The Badge + Button Combo is a shadcn/ui component that combines a standard button with a floating badge to display status or counts, such as “New,” “Beta,” or numeric notifications. The badge is positioned top-right of the button and scales appropriately with the button size, which can be configured as sm, md, or lg. This design provides a clear visual indicator for alerts, updates, or special statuses while keeping the button functional and interactive. Its flexibility makes it ideal for dashboards, messaging interfaces, or feature highlight buttons, adding both usability and visual appeal to any interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/badge-button-comboimport BadgeButtonCombo from "@/components/ui/badge-button-combo";
export default function DemoBadgeButtonCombo() {
return (
<div className="flex gap-4">
<BadgeButtonCombo label="Messages" badge={3} />
<BadgeButtonCombo label="Notifications" badge="New" />
<BadgeButtonCombo label="Beta Feature" badge="Beta" size="lg" />
</div>
);
}