Components
Loading preview...
import { MailCheckIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
const IconButtonBadgeDemo = () => {
return (
<Button variant='outline' size='icon' className='relative'>
<MailCheckIcon />
<span className='sr-only'>Messages</span>
<Badge variant='destructive' className='absolute -top-2.5 -right-2.5 h-5 min-w-5 rounded-full px-1 tabular-nums'>
8
</Badge>
</Button>
)
}
export default IconButtonBadgeDemo
More examples
DefaultOpen page →
Loading preview...
Button oneOpen page →
Loading preview...
Button TwoOpen page →
Loading preview...
Button ThreeOpen page →
Loading preview...
Button Four Open page →
Loading preview...
Button FiveOpen page →
Loading preview...
Button LargeOpen page →
Loading preview...
Button SmallOpen page →
Loading preview...
Button Extra SmallOpen page →
Loading preview...
Button DeleteOpen page →
Loading preview...
Button Get StartedOpen page →
Loading preview...
Button UpgradeOpen page →
Loading preview...
Button CopyOpen page →
Loading preview...
Button DownloadOpen page →
Loading preview...
Button TrashOpen page →
Loading preview...
Button BackOpen page →
Loading preview...
Button LoadingOpen page →
Loading preview...
Button Contact Open page →
Loading preview...
Button PublishOpen page →
Loading preview...
Button Copy LinkOpen page →
Loading preview...
Button MessagesOpen page →
Loading preview...
Button WarningOpen page →
Loading preview...
Button SaveOpen page →
Loading preview...
Button Approve n RejectOpen page →
Loading preview...
Button NotificationsOpen page →
Loading preview...
Button Click LoadingOpen page →
Loading preview...
Button Link AvatarOpen page →
Loading preview...
Button Copy OneOpen page →
Loading preview...
Button SocialsOpen page →
Loading preview...
Button Socials TitleOpen page →
Loading preview...
Button BookmarksOpen page →
Loading preview...
Button MenuOpen page →
Loading preview...
Button Theme SwitcherOpen page →
Loading preview...