# Button > Primary, secondary, outline, ghost, danger and link buttons in three sizes, with a loading state that manages itself. GramproKit 2.9.3 · Inputs · Beta (experimental; APIs may change) · Source: https://kit.gramproindia.com/button Also available for React Native (iOS and Android, beta): https://kit.gramproindia.com/native/docs/button.md ## Installation ```bash npx @grampro/kit add Button ``` The block copies the `button` folder into your project, along with the small `shared` folder that every component imports. You own the code and can change it freely. The files land in `component-lib/`, or `src/component-lib/` when your project has a `src/` folder; pass `--dest` to put them somewhere else, and later installs follow the first. There are **no peer dependencies** other than React. **Requirements** - React 19 and `@types/react` 19 - TypeScript target ES2022 or newer, with `"jsx": "react-jsx"` - Browsers from 2024 or newer (the styles use `light-dark()` and `color-mix()`) Import the stylesheet once, for example in your global CSS: ```css @import "../component-lib/gbs.css"; ``` or in your root layout / entry file: ```ts import "@/component-lib/gbs.css"; ``` The Button covers every everyday action: primary and secondary actions, outlines, quiet ghost buttons, destructive actions and link-style buttons, in three sizes, with icons. Its loading state manages itself: return a promise from `onClick`, or submit a form with a Server Action, and the button shows a spinner until the work is done. It keeps its width and keyboard focus meanwhile. It can also render as another element, such as a router link, with the same look. > **Note:** Set the --gbs-* variables on :root to theme every component at once, the grid included. Each component's own variables fall back to them, and then to the built-in palette, so components look identical out of the box. #### Default _Interactive demo:_ [open the live example](https://kit.gramproindia.com/button) ## Quick Start ```tsx "use client"; import { Button } from "@/component-lib/button"; export function SaveBar({ onSave }: { onSave(): Promise }) { return (
); } ``` `onSave` returns a promise, so the Save button shows a spinner and ignores further clicks until it settles. > **Note:** The default type is 'button', not the browser's 'submit', so a Button inside a form never submits it by accident. Pass type='submit' for the button that should. ## Props Table Accepts every ` {/* the main action on a screen */} {/* toolbars, tables, low-emphasis actions */} {/* destructive actions */} {/* looks like a link, behaves like a button */} ``` Every variant and size together, with an icon-only button, a disabled one, an async `onClick`, a controlled `loading` and a button rendered as a link. The async button keeps its width and its focus while it works. _Interactive demo:_ [open the live example](https://kit.gramproindia.com/button) ## Icons ```tsx ``` - **Stays focusable:** while busy, the button uses `aria-disabled` instead of `disabled`, so keyboard focus doesn't jump elsewhere. - **Stays put:** the label is hidden but keeps its space, so the button doesn't change width. `loadingText` swaps the label for text, and then the width can change. - **Ignores repeats:** further clicks and form submissions are blocked until the work finishes. - **Keeps errors visible:** if the promise rejects, the loading state ends and the error still surfaces as an unhandled rejection. Catch it in your handler to show a message. ## Links and Other Elements To make a link look like a button, use `render`. It receives the button's class names, data attributes, click handling and content: ```tsx import Link from "next/link"; ; ``` ```tsx ``` Button-only attributes (`type`, `form`, `name`, `value`) are left off the rendered element. A disabled or busy link gets `aria-disabled` and ignores clicks. ## Keyboard | Keys | Action | | --------------------- | ------------------------------------------------------------- | | **Enter** / **Space** | Activate the button. | | **Tab** | Move to the next control; busy buttons stay in the tab order. | Accessibility: a real `` | | `id`, `name`, `className`, `disabled`, `onClick` | Same names | | `type` (default `submit` in the browser) | `type`, now defaulting to `button`; pass `type="submit"` where needed | | `buttonStyles` from `globalStyle.ts` (`primary`, `secondary`, `outline`, `ghost`, `danger`; `sm`, `md`, `lg`) | `variant` and `size` with the same names, plus `link` | | — | New: `loading`, async `onClick`, form-action pending state, icons, `fullWidth`, `render` | #### Notes - Icon-only buttons need an `aria-label`; the component can't infer one from an icon. - `render` must spread the props it receives onto the element, or the look and click handling are lost.