Button
Triggers an action or navigates, with a semantic variant and size scale.
Usage
import { Button } from "@kanzo-tech/ui";<Button variant="outline" size="sm">
Reassign
</Button>Variants
Sizes
With icon
Icons are plain children — the recipe sizes any svg that has no explicit size-* and
disables its pointer events, so no wrapper or icon prop is needed. Use size="icon-*" and an
aria-label for an icon-only button.
Loading
isLoading keeps the button's width by rendering the label invisibly behind the spinner, so
the layout never shifts mid-action. It also sets aria-busy and aria-disabled.
Disabled
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "default" |
size | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | "md" |
`sm` is the floor, and it is measured
There was an xs at 1.5rem. Every size here is a rem against a root the density axis sets —
16px default, 14px compact, 18px comfortable — so xs measured 21px in compact, under the
24×24 WCAG 2.5.8 states in
CSS pixels. 1.75rem is 24.5px there, which makes sm the smallest size that clears the bar in
all three densities.
No call site was failing — 2.5.8's spacing exception saves a clustered control, and every measured
xs sat in a cluster. It went because its name promised a size it could not deliver at one
density.
| isLoading | boolean | false |
| clickEffect | boolean | true |
| pill | boolean | false |
Extends React.ComponentProps<typeof ark.button>, so ref and every native button prop pass
through.