Skip to content
NockerlDesignv2.0.0

Button

Approved
Live · web

Variants: hover, tab, click them

Disabled: inert, still visible

Loading: holds width, blocks re-click

Sizes

Click handler fired 0 times. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
import { NockerlButton } from '@dizyx/nockerl-react';


export function SessionToolbar() {
  return (
    <div className="toolbar">
      <NockerlButton text="Create session" variant="primary" leadingIcon="+" onClick={createSession} />
      <NockerlButton text="Files" variant="secondary" onClick={openFiles} />
      <NockerlButton text="Archive all" variant="tertiary" onClick={archiveAll} />
      <NockerlButton text="Cancel" variant="ghost" onClick={dismiss} />
      <NockerlButton text="Delete" variant="destructive" onClick={confirmDelete} />
    </div>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
text *stringVisible label.
variantNockerlButtonVariant'primary'Emphasis ladder.
sizeNockerlButtonSize'md'Control height + padding.
loadingbooleanfalseShows a spinner, holds the button width, blocks re-click.
leadingIconReactNodeOptional leading glyph (icon slot).
trailingIconReactNodeOptional trailing glyph (icon slot AFTER the label), e.g. a chevron / arrow.
loadingTextstringLabel shown WHILE loading (e.g. "Saving…"); falls back to text.
type'button' | 'submit' | 'reset''button'Native button type: submit/reset for real forms (default button).
fullWidthbooleanfalseStretch to the container width (e.g. a full-width CTA / sheet action).
ariaLabelstringAccessible name override (when the label alone is ambiguous).
pressedbooleanTOGGLE mode: when set, the button HOLDS state: it renders aria-pressed and, when true, the pressed VISUAL is the selection wash (soft cyan + cyan ink, design-laws section 6), NOT a separate control. Omit it for a plain command button.

Also accepts the native <button> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.