ASCII button

Installation

Usage

Copyimport { AsciiButton } from "@/components/asciicn/ascii-button";
 
export function Actions() {
  return (
    <>
      <AsciiButton color="green">Deploy</AsciiButton>
      <AsciiButton variant="outline" frame="brackets">
        View logs
      </AsciiButton>
    </>
  );
}

AsciiButton renders a real <button> with type="button" unless you pass another type. It is set in the glyph font, two cells tall. Its frame is box-drawing text whose lines run along the button's edges, and the label sits on the row between them.

• filled shows the label row in inverse video: a slab of the colour with the label knocked out in the page colour.
• outline shows the frame and a plain label, and inverts the row on hover.
• ghost is a plain label whose frame and inverse row appear on hover and focus.

On hover and keyboard focus, a cursor glyph (›) steps into the cell before the label, as a terminal menu marks its selection. Press darkens the row.

The label, the gap between children and any icon are whole cells wide (an icon takes two), so the frame always closes on the grid.

Examples

Variants, frames and colours

Each row is one variant across four colours and a mix of frames: rounded, light, heavy, double, ascii and brackets, which draws only the corners.

Loading in a form

loading keeps the label and the width, spins a SPINNERS sequence in the cursor's cell, sets aria-busy and ignores clicks until it clears. Submit this one to see it.

As a link

Pass asChild and a single child, such as Next.js Link or a plain <a>, and the child gets the button's frame and states. It stays a link: right click and middle click work, and the router handles navigation.

Props

All other props pass through to the <button>, or to your child with asChild.

Notes

• Keyboard focus shows a 2 pixel outline outside the frame and the cursor glyph, so keyboard users see the same marker as pointer users.
• Hover styles only apply on devices that can hover. Press works everywhere, so touch screens get the darker row as feedback.
• With reduced motion, the row switches without fading, the press does not scale and the spinner holds its first frame.
• Disabled and loading buttons drop to 45% opacity with a not-allowed or progress cursor. For a disabled link, set aria-disabled on it and leave out href.
• The frame and row are text and CSS in one shared <style> tag. Only the spinner runs JavaScript.