Components
import { Button } from "@/components/ui/button";
import { ChevronDown } from "lucide-react";
function Component() {
return (
<Button>
Button
<ChevronDown className="-me-1 ms-2 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />
</Button>
);
}
export { Component };
More examples
DefaultOpen page →
Disabled buttonOpen page →
Rounded buttonOpen page →
Button with IconOpen page →
Destructive buttonOpen page →
Secondary buttonOpen page →
Outline buttonOpen page →
Ghost button with iconOpen page →
Button with animated arrowOpen page →
Button with icon and arrowOpen page →
Group of buttonsOpen page →
Loading buttonOpen page →
Loading buttonOpen page →
Button with numberOpen page →
Button with <kbd>Open page →
User button with usernameOpen page →
User buttonOpen page →
Add new buttonOpen page →
Add new item buttonOpen page →
Open & Close Menu ButtonOpen page →
Button with tooltipOpen page →
Menu ButtonOpen page →
Button with BadgeOpen page →
Upvote ButtonOpen page →
Dark Upvote ButtonOpen page →
Copy button with tooltipOpen page →
Group of buttons with Icons and More buttonOpen page →
Button with secondary icon buttonOpen page →
Button with secondary redirect buttonOpen page →
Button with Secondary Chevron Down buttonOpen page →
Button with number and secondary chevron down buttonOpen page →
Button with DropdownOpen page →
Button with highlighted iconOpen page →
Button with highlighted right iconOpen page →
Button with separate numberOpen page →
GitHub Stars ButtonOpen page →
Group of buttons "Login with"Open page →
Group of buttons "Login with" coloredOpen page →
"Login with" buttonsOpen page →
"Login with" colored buttonsOpen page →
Show more buttonOpen page →
Go back buttonOpen page →
Button with TitleOpen page →
Source
Published
Similar components
Explore more
Part of Origin UI — browse the full library on 21st.dev.