anticraftui
Button playground
ButtonsPlayground
A LITTLE ROOM TO PLAY

Your words.
Your kind of click.

Pick an interaction, find your colors, and make the details yours. The code follows along.

Make it yours

Palette

Accent colors the icon, fill, border, base, or focus ring for your chosen interaction.

Size

Live preview

READY TO TRY

Hover, focus, or press to try it.

Arrow Capsule

A little direction. A clear invitation.

Native keyboard and touch controls. Reduced motion built in. Connect the click handler to your own action.

TAKE IT WITH YOU

Your button, ready to build.

Install Arrow Capsule, then copy this example into your app.

Installation
Example.tsx
'use client';

import { useState, type CSSProperties } from 'react';
import { ArrowCapsuleButton } from '@/components/anticraft/ArrowCapsuleButton';

const buttonStyle = {
  "fontSize": 15,
  "minHeight": 60,
  "borderRadius": 24,
  "minWidth": 0,
  "maxWidth": "100%",
  "overflowWrap": "anywhere",
  "--ac-arrow-bg": "#e2ead8",
  "--ac-arrow-color": "#243026",
  "--ac-arrow-circle-bg": "#243026",
  "--ac-arrow-circle-color": "#fffdf6",
  "--ac-arrow-hover-bg": "#e2ead8",
  "--ac-arrow-active-bg": "#e2ead8",
  "--ac-arrow-focus": "#243026",
  "--ac-arrow-press-ring": "#243026"
} as CSSProperties;

export function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ArrowCapsuleButton
        type="button"
        style={buttonStyle}
        disabled={false}
        onClick={() => setCount(value => value + 1)}
      >
        {"Make something good"}
      </ArrowCapsuleButton>
      <p role="status">
        {count ? `Demo action activated ${count} times.` : 'Try the button.'}
      </p>
    </div>
  );
}