Components
Loading preview...
"use client";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Bell } from "lucide-react";
import { useState } from "react";
function Component() {
const [count, setCount] = useState(3);
const handleClick = () => {
setCount(0);
};
return (
<Button
variant="outline"
size="icon"
className="relative"
onClick={handleClick}
aria-label="Notifications"
>
<Bell size={16} strokeWidth={2} aria-hidden="true" />
{count > 0 && (
<Badge className="absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1">
{count > 99 ? "99+" : count}
</Badge>
)}
</Button>
);
}
export { Component };
More examples
DefaultOpen page →
Loading preview...
Disabled buttonOpen page →
Loading preview...
Rounded buttonOpen page →
Loading preview...
Button with IconOpen page →
Loading preview...
Destructive buttonOpen page →
Loading preview...
Secondary buttonOpen page →
Loading preview...
Outline buttonOpen page →
Loading preview...
Ghost button with iconOpen page →
Loading preview...
Button with animated arrowOpen page →
Loading preview...
Button with icon and arrowOpen page →
Loading preview...
Button with arrow downOpen page →
Loading preview...
Group of buttonsOpen page →
Loading preview...
Loading buttonOpen page →
Loading preview...
Loading buttonOpen page →
Loading preview...
Button with numberOpen page →
Loading preview...
Button with <kbd>Open page →
Loading preview...
User button with usernameOpen page →
Loading preview...
User buttonOpen page →
Loading preview...
Add new buttonOpen page →
Loading preview...
Add new item buttonOpen page →
Loading preview...
Open & Close Menu ButtonOpen page →
Loading preview...
Button with tooltipOpen page →
Loading preview...
Menu ButtonOpen page →
Loading preview...
Upvote ButtonOpen page →
Loading preview...
Dark Upvote ButtonOpen page →
Loading preview...
Copy button with tooltipOpen page →
Loading preview...
Group of buttons with Icons and More buttonOpen page →
Loading preview...
Button with secondary icon buttonOpen page →
Loading preview...
Button with secondary redirect buttonOpen page →
Loading preview...
Button with Secondary Chevron Down buttonOpen page →
Loading preview...
Button with number and secondary chevron down buttonOpen page →
Loading preview...
Button with DropdownOpen page →
Loading preview...
Button with highlighted iconOpen page →
Loading preview...
Button with highlighted right iconOpen page →
Loading preview...
Button with separate numberOpen page →
Loading preview...
GitHub Stars ButtonOpen page →
Loading preview...
Group of buttons "Login with"Open page →
Loading preview...
Group of buttons "Login with" coloredOpen page →
Loading preview...
"Login with" buttonsOpen page →
Loading preview...
"Login with" colored buttonsOpen page →
Loading preview...
Show more buttonOpen page →
Loading preview...
Go back buttonOpen page →
Loading preview...
Button with TitleOpen page →
Loading preview...
Source
Published
Similar components
Explore more
Part of Origin UI — browse the full library on 21st.dev.