# Flow Button

> Pill button with a circular icon on the right; inverts on hover while the arrow nudges forward.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/flow-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/flow-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/flow-button-demo.tsx"
import { Send } from "lucide-react"

import { FlowButton } from "@/components/flow-button"

export default function FlowButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <FlowButton>Get started</FlowButton>
      <FlowButton icon={<Send className="size-4" />}>Send message</FlowButton>
    </div>
  )
}
```

## Source

```tsx title="components/flow-button.tsx"
import * as React from "react"
import { ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"

export interface FlowButtonProps extends React.ComponentProps<"button"> {
  icon?: React.ReactNode
}

export function FlowButton({ icon, className, children, ...props }: FlowButtonProps) {
  return (
    <button
      className={cn(
        "group inline-flex h-12 items-center gap-3 rounded-full border border-border bg-background py-1.5 pr-1.5 pl-6 text-sm font-medium text-foreground",
        "transition-colors duration-300 hover:border-foreground hover:bg-foreground hover:text-background",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span>{children}</span>
      <span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background transition-colors duration-300 group-hover:bg-background group-hover:text-foreground">
        <span className="transition-transform duration-300 group-hover:translate-x-0.5">
          {icon ?? <ArrowRight className="size-4" />}
        </span>
      </span>
    </button>
  )
}
```