Shadcn.io is not affiliated with official shadcn/ui
Expand Button
Button that expands wider on hover revealing an icon or extra content for React.
Expand Button preview
Compact until needed. Hover and the button smoothly grows wider, revealing a hidden icon that slides into view. It's space-efficient design—keep your UI clean but reward curiosity. Perfect for action buttons in tight spaces like tables, cards, or toolbars. The expansion is quick and smooth, never jarring. The icon adds context without cluttering the default state.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the expand-button button into my projectRelated Components
Arrow Button
Animated arrow on hover
Input Button
Expandable input field
Icon Button
Animated icon states
Slide Reveal Button
Layers slide apart
Swipe Button
Color swipe fill
Morph Button
Shape morphing
FAQ
Was this page helpful?
Sign in to leave feedback.