Button

Clickable action/link control. Renders as an anchor (<a>) by default, or as a Next.js Link via the as prop.

When to use

Use Button for any primary action or navigation target. It is anchor-based, so it works both as a button (with onClick / type="submit") and as a link (with href).

• Icon-only buttons: use IconButton instead — the isIconButton prop here is deprecated.
• Groups of buttons: see ButtonGroup and ButtonList.

There is no @uxf/form twin — Button is not a form field, it is a standalone control.

Usage

import { Button } from "@uxf/ui/button";

// action
<Button onClick={handleSave}>Save</Button>

// link (server-rendered anchor)
<Button href="/pricing">Pricing</Button>

// client-side navigation via Next.js Link
import Link from "next/link";
<Button as={Link} href="/dashboard">Dashboard</Button>

// form submit
<Button type="submit">Submit</Button>

Props

Extends AnchorHTMLAttributes<HTMLAnchorElement> (minus type), so all standard <a> attributes (href, target, rel, download, onClick, className, children, …) are accepted.

Variants & states

Built-in values (from theme.ts):

These sets are open interfaces (ButtonVariants, ButtonSizes, ButtonColors). A project can add its own values via module augmentation:

// button.d.ts
declare module "@uxf/ui/button/theme" {
    interface ButtonVariants {
        cta: true;
    }
}

Behavioural states:

• Loading: set isLoading, or return a Promise from onClick — the button automatically enters the busy state until the promise settles.

  <Button onClick={() => new Promise((resolve) => setTimeout(resolve, 1000))}>Save</Button>
  

• Disabled: set isDisabled. Clicks and keyboard activation are blocked and the control leaves the tab order.

• Links: when href and target="_blank" are set, rel="noopener noreferrer" is added automatically.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/button.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Links

• Figma