ButtonsNew

Circle Fill Button

An outlined pill that fills with color from a small point at its edge.

USE IT FORPrimary actionsContact formsProduct launches

LET THE COLOR IN03 / BUTTON STUDIES

Room for a little more.

A tiny point. A full invitation.

HOVER · FOCUS · PRESSDisabled state

Live component. Go ahead, interact.

REACT / TYPESCRIPT

'use client';

import { forwardRef, type ButtonHTMLAttributes } from 'react';
import './circle-fill-button.css';

export interface CircleFillButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}

/** A native button with a circular background reveal and a directional arrow. */
export const CircleFillButton = forwardRef<HTMLButtonElement, CircleFillButtonProps>(
  function CircleFillButton({ children, className = '', type = 'button', ...props }, ref) {
    return (
      <button
        {...props}
        ref={ref}
        type={type}
        className={`ac-circle-fill-button ${className}`.trim()}
      >
        <span className="ac-circle-fill-button__surface">
          <span className="ac-circle-fill-button__label">{children}</span>
          <svg
            className="ac-circle-fill-button__arrow"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="1.6" />
          </svg>
        </span>
      </button>
    );
  },
);

export default CircleFillButton;

Installation

Run this in your shadcn-configured React project. The component and stylesheet are added together.

TERMINAL

npx shadcn@latest add http://localhost:5173/r/circle-fill-button.json

This 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.

TypeScript

'use client';

import { useState } from 'react';
import { CircleFillButton } from '@/components/anticraft/CircleFillButton';

export function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <CircleFillButton onClick={() => setCount(value => value + 1)}>
        Open possibilities
      </CircleFillButton>
      <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-fill-background, --ac-fill-foreground, --ac-fill-accent, --ac-fill-active-foreground, --ac-fill-border, and --ac-fill-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

Considered by default.

A decorative circular color field expands from the lower-left corner on hover or visible focus. Touch input receives a distinct pressed state. 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.

← PREVIOUSRolling Text Button NEXT →Shutter Button