GuidesComponentsBlocksTemplatesCommunity

Clip Corners Button

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

Open in v0
~10.0 kB

Last updated: August 2, 2026

Installation

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

AttributeElementPurpose
aria-labelCorner SVGsEach 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

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev
SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.

© 2026 SmoothUI. Built by Eduardo Calvo.