Clip Corners Button
Animated React button with geometric clipped corners, hover sheen micro-interactions, and easy theming built with Tailwind CSS.
Installation
npx smoothui-cli add clip-corners-buttonFeatures
- Unique clipped-corners style
- Hover/press micro-interactions
- Works with icons and labels
- Easy theming
Accessibility
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
aria-label | Corner SVGs | Each decorative corner triangle has an accessible label and <title> |
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the corner triangle hover animations are disabled. The component also detects hover-capable devices and disables hover animations on touch devices.
Props
Button Copy
Animated copy-to-clipboard React button with smooth success feedback, tooltip support, and accessibility. Perfect for code snippets and shareable content.
Dot Morph Button
Animated React button component with morphing dot animations for idle, loading, and success states with ARIA accessibility support.