Clip Corners Button

Geometric button with clipped corners and hover sheen.

~10.0 kB

Last updated: March 7, 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

Button with morphing dots for progress/confirmation.