Components
Corner Cut Button
A button with a diagonal corner cut, multiple variants, colors, sizes and hover effects.
npx neonblade add corner-cut-buttonVariants
Colors
Sizes
Corners
Hover Effects (hover each)
With Arrow / Hero style
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Button label content. |
color | "cyan" | "pink" | "green" | string | "cyan" | Accent color — use a preset name or any valid CSS color (e.g. "#ff4400"). |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Controls padding and font size. |
variant | "solid" | "outline" | "ghost" | "solid" | Visual style. solid fills with the accent color (matches the Hero button), outline adds a border, ghost is subtly tinted. |
corner | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "all" | "bottom-right" | Which corner(s) receive the diagonal cut. |
cornerSize | number | 20 | Depth of the corner diagonal cut in pixels. |
hoverEffect | "glow" | "shift" | "shine" | "pulse" | "scan" | "flicker" | "none" | "glow" | Hover animation preset applied to the button. |
glowIntensity | "low" | "medium" | "high" | "medium" | Spread radius of neon glow effects. |
showArrow | boolean | false | Appends a → arrow that slides right on hover. |