Clip Corners Button

Animated React button with geometric clipped corners, hover sheen micro-interactions, and easy theming built with Tailwind CSS.

~10.0 kB

Last updated: March 18, 2026

Installation

npx smoothui-cli add clip-corners-button

npx smoothui-cli add clip-corners-button

Features

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>`

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.