Button

Installation

npx gbs-add-block@latest -a Button -beta

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. 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:

@import "../components/button/styles.css";

or in your root layout / entry file:

import "@/components/button/styles.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.

Default

Quick Start

"use client";
 
import { Button } from "@/components/button";
 
export function SaveBar({ onSave }: { onSave(): Promise<void> }) {
  return (
    <div>
      <Button variant="outline">Cancel</Button>
      <Button onClick={onSave}>Save changes</Button>
    </div>
  );
}

onSave returns a promise, so the Save button shows a spinner and ignores further clicks until it settles.

Props Table

Accepts every <button> attribute, plus:

Variants

<Button>Primary</Button>                     {/* the main action on a screen */}
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>       {/* toolbars, tables, low-emphasis actions */}
<Button variant="danger">Delete</Button>     {/* destructive actions */}
<Button variant="link">Learn more</Button>   {/* looks like a link, behaves like a button */}

Icons

<Button leading={<PlusIcon />}>New invoice</Button>
<Button variant="outline" trailing={<ArrowRightIcon />}>Next</Button>
<Button variant="ghost" icon={<TrashIcon />} aria-label="Delete row" />

Icons are sized to the text (1.15 em). leading and trailing icons are hidden from screen readers, since the label says what the button does. An icon-only button has no visible text, so its aria-label is its only name.

Loading

The loading state has three sources:

<form action={createInvoice}>
  <Input name="customer" label="Customer" required />
  <Button type="submit">Create invoice</Button>
</form>

• 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:

import Link from "next/link";
 
<Button variant="outline" render={(props) => <Link href="/billing" {...props} />}>
  Go to billing
</Button>;

<Button variant="link" render={(props) => <a href="/docs" target="_blank" rel="noreferrer" {...props} />}>
  Documentation
</Button>

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

Accessibility: a real <button> by default. While busy, it has aria-busy="true" and announces "Loading" through visually hidden text. leading and trailing icons are aria-hidden. Focus shows as a 2 px ring on keyboard focus only (:focus-visible).

Styling and Theming

All rules are in the CSS components layer, so utility classes passed through className / classNames override them.

<Button className="rounded-full px-6" />

CSS variables

Override them on .bt-root, on :root, or through style. Each variable falls back to the shared --gbs-* of the same name, then to the DataGrid's --dg-* when that stylesheet is loaded, and finally to the built-in palette.

/* A brand variant, without touching the component */
.bt-root.brand {
  --bt-fill: #7c3aed;
  --bt-fill-hover: #6d28d9;
  --bt-line: #7c3aed;
  --bt-ink: white;
}

Data attributes

Locale Text

<Button localeText={{ loading: "Wird geladen" }} />

Headless Use

Next.js

The Button is a client component with "use client" at the top of its file.

• In Server Components: it works as long as you pass no function props. A type="submit" Button inside <form action={serverAction}> needs none and shows progress on its own, so it works on a Server Component page.
• With onClick or render: these are functions, which a Server Component can't pass to a client component. Use them inside a client component, for example to wrap next/link with render.

Migrating from the Previous Custom Button

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.