Ghost extra small Button
Icon-scale rows: ghost style adds an action without stealing focus.
Preview & code
Interactive states
Interactive states
GFA Button uses the native button element with Tailwind transitions. Styles respond to real pointer and keyboard interaction (not simulated CSS-only states in screenshots).
- Hover / active: hover:* and active:* (with group/button for nested icons where needed).
- Focus: focus-visible:border-ring and focus-visible:ring-* — always test with keyboard, not only mouse.
- Disabled: disabled:pointer-events-none + disabled:opacity-50 — no hover/active while disabled.
- Busy: pair disabled with aria-busy for in-flight actions so assistive tech and styles stay honest.
- Invalid: aria-invalid toggles error ring tokens (aria-invalid:ring-*).
- Link overlay: avoid wrapping live demos in anchor (a) elements; use a hit target that skips the preview (data-docs-no-nav) so hover/focus/click demos stay real.
Tokens & attributes
Most states are controlled by native attributes and CSS selectors: :hover, :active, :focus-visible, disabled, aria-busy, aria-invalid.
Color tokens come from CSS variables (e.g. --primary, --border, --ring ) and are applied by Tailwind utilities in the React version.
Hover & active
Hover the control; press and hold for active styles (where the variant defines them).
Focus-visible
Click the control above first (user-gesture focus), then inspect the ring — or Tab from the keyboard through the page.
Disabled
Busy (in-flight)
Invalid
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
https://ui.gkhn.dev/gfa/ghost-extra-small-button.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/ghost-extra-small-button.json (or copy from this repo: apps/web/src/components/gfa/button.tsx).
- Place it in your project (for example: ./src/components/ui/button.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "destructiveFilled" | "link" | "default" | Visual style and tone. |
| size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Height, padding, and icon scale. |
| type | "button" | "submit" | "reset" | "button" | Native button type (button, submit, reset). |
| disabled | boolean | false | Disables the control; removes pointer interaction and dims via token styles. |
| aria-busy | boolean | — | Marks in-flight work; often pair with disabled to block repeat submits. The loading showcase preview uses aria-busy without disabled so it stays visually active. |
| aria-invalid | boolean | — | Surfaces validation errors via destructive ring tokens. |
| ...props | ButtonHTMLAttributes<HTMLButtonElement> | — | Standard button attributes (onClick, disabled, aria-*, etc.). |
| className | string | — | Extra classes merged with cn(...). |