# ASCII Button

> Buttons framed in brackets, boxes, arrows or underlines that come alive on hover.

Category: Interface. Docs: https://asciicn.sumak.dev/docs/ascii-button

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-button
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiButton } from "@/components/ascii/ascii-button"

<AsciiButton>Deploy</AsciiButton>
<AsciiButton variant="box" className="text-primary">Run</AsciiButton>
```

## Examples

### Every variant

Hover or tab through them. `brackets` step out a character, `box` turns heavy, `arrow` grows a blinking cursor and `underline` types itself in.

```tsx
<AsciiButton variant="brackets">Deploy</AsciiButton>
<AsciiButton variant="box">Deploy</AsciiButton>
<AsciiButton variant="arrow">deploy</AsciiButton>
<AsciiButton variant="underline">Deploy</AsciiButton>
```

### Next to shadcn Button

Same heights, focus ring and disabled style as `Button`, so they share a toolbar. Colour comes from `text-*`.

```tsx
<Button variant="outline">Cancel</Button>
<AsciiButton disabled>Revert</AsciiButton>
<AsciiButton className="text-primary">Deploy</AsciiButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"brackets" | "box" | "arrow" | "underline"` | `"brackets"` | The glyph frame, and how it animates. |
| `size` | `"sm" | "default" | "lg"` | `"default"` | Heights match shadcn Button: 28, 32 and 36 px. |
| `type` | `"button" | "submit" | "reset"` | `"button"` | Pass `submit` inside forms. |
| `...props` | `ComponentProps<"button">` |  | Every native button prop, including `ref`, `disabled` and `onClick`. |

## Notes

- **Accessibility.** A native `<button>`, so keyboard, form and screen reader behaviour come for free. Frame glyphs are `aria-hidden`; only the label is read. Focus shows the same ring as shadcn Button, and the frame animates on `:focus-visible` as well as hover.
- **Motion.** Under `prefers-reduced-motion` the frame still changes on hover but jumps instead of moving, and the cursor does not blink.
- **Layout.** Glyphs only move inside space the button already reserves, so it never changes width on hover.
- **Dependencies.** None, and no client JavaScript: hover states are CSS. The `arrow` cursor blinks with `animate-caret-blink` from tw-animate-css, which shadcn projects include; without it the cursor shows steadily.