Shutter Button
Two diagonal panels meet behind the label for a confident, architectural click.
'use client';
import { forwardRef, type ButtonHTMLAttributes } from 'react';
import './shutter-button.css';
export interface ShutterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
/** A native button with opposing diagonal shutters and a rotating plus. */
export const ShutterButton = forwardRef<HTMLButtonElement, ShutterButtonProps>(
function ShutterButton({ children, className = '', type = 'button', ...props }, ref) {
return (
<button
{...props}
ref={ref}
type={type}
className={`ac-shutter-button ${className}`.trim()}
>
<span className="ac-shutter-button__surface">
<span className="ac-shutter-button__label">{children}</span>
<svg
className="ac-shutter-button__plus"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
focusable="false"
>
<path d="M5 12h14M12 5v14" stroke="currentColor" strokeWidth="1.6" />
</svg>
</span>
</button>
);
},
);
export default ShutterButton;
Installation
Run this in your shadcn-configured React project. The component and stylesheet are added together.
npx shadcn@latest add http://localhost:5173/r/shutter-button.jsonThis command uses the current site address. For localhost, keep this preview running on the same computer. Files follow your configured components alias.
Usage
Import the component and make the details your own.
'use client';
import { useState } from 'react';
import { ShutterButton } from '@/components/anticraft/ShutterButton';
export function Example() {
const [count, setCount] = useState(0);
return (
<div>
<ShutterButton onClick={() => setCount(value => value + 1)}>
Start something
</ShutterButton>
<p role="status">{count ? `Demo action activated ${count} times.` : 'Try the button.'}</p>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Required | A meaningful button label. Keep children non-interactive; decorative icons should be hidden from assistive technology. |
type | 'button' | 'submit' | 'reset' | 'button' | The native button type. Set submit explicitly when the button should submit its associated form. |
disabled | boolean | false | Disables native activation and decorative hover/pressed effects. The live demo includes a checkbox to inspect this state. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | Your action handler. Native keyboard and touch activation use the same handler. Buttons have no built-in navigation, payment, or form-submission action. |
className / style | string / CSSProperties | '' / undefined | Additional classes and native inline styles. Theme with --ac-shutter-background, --ac-shutter-foreground, --ac-shutter-panel, --ac-shutter-active-foreground, --ac-shutter-border, and --ac-shutter-focus. |
Native button props / ref | ButtonHTMLAttributes<HTMLButtonElement> / Ref<HTMLButtonElement> | undefined | Native form, name, value, aria-*, data-*, event, and other button attributes pass through. A forwarded ref points to the actual button. Native disabled behavior is preserved. |
Motion & accessibility
Two clipped panels close beneath the label on hover or keyboard focus, while the decorative plus rotates. Motion is finite and removed for prefers-reduced-motion. Every variant keeps a visible focus outline, a native button hit area of at least 44px, and a disabled state. In the demo, activation increments a clearly labeled demo counter; connect your own action in your app.
Use semantic content and meaningful labels in your composition. Check contrast and keyboard behavior with your own styles and content.