Button

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/button v1.3.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/button
7// What changed since: https://ds.interlace.tools/c/button#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — Button (secondary reference for the interlace-component skill)
12 *
13 * The minimal-surface counterpart to [dialog.tsx](./dialog.tsx). Where Dialog
14 * exercises compound composition + portal + focus, Button exercises the
15 * variant + render-prop polymorphism + native-event passthrough surface.
16 *
17 * | Rule | Concept                          | Where in this file                                                          |
18 * | ---- | -------------------------------- | --------------------------------------------------------------------------- |
19 * | R4   | Extends native el + VariantProps | `React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>`      |
20 * | R7   | className merged + ...rest + ref | `cn(buttonVariants({ ... }), className)` + `{...props}` + `useRender`        |
21 * | R8   | No `isXxx` prefix                | All variant keys (`variant`, `size`) follow MUI naming, not `isXxx`         |
22 * | R9   | Native onClick stays native      | `onClick` passes through `{...props}` — never wrapped in a bespoke name     |
23 * | R12  | Reuse over wrap                  | The `render` prop lets consumers replace the rendered element entirely      |
24 * | R13  | Ecosystem first                  | `useRender` from `@base-ui/react/use-render` owns slot rendering |
25 * | R17  | API parity                       | Mirrors shadcn/ui Button + Base UI's `useRender` slot — no deviation        |
26 * | R18  | Tailwind only                    | Zero inline `style={{}}`; all visual classes come from `buttonVariants`     |
27 * | R19  | Tokens only                      | `buttonVariants` lives in [button-variants.ts](./button-variants.ts) and uses theme tokens |
28 * | R20  | AA contrast                      | Variant classes target `bg-primary`/`text-primary-foreground` — token pair  |
29 * | R26  | A11y from native el              | `<button>` is the native element; focus, keyboard, ARIA inherited           |
30 *
31 * Out of scope: this primitive does not own `data-testid` / `data-slot` defaults
32 * (R5 / R6) — those are consumer-supplied and live one level up in the
33// … truncated