Button

Renders a real <button type="button"> by default. Use render when the action navigates rather than does something in place, so it renders as an <a> instead.

Rendered as a link

Usage

import { Button } from "@kernelui/react";

<Button variant="primary">Save changes</Button>

Props

Only the props specific to Button. Every native button attribute (onClick, form, name…) also works.
Prop	Type	Default
`variant`	"primary" \| "secondary" \| "ghost" \| "danger"	"secondary"
`size`	"sm" \| "md" \| "lg"	"md"
`loading`	boolean	false
`iconStart` / `iconEnd`	ReactNode	—
`render`	ReactElement \| (props, state) => ReactElement	—

Accessibility

Space and Enter activate it, focus and disabled state are native.
When rendered via render as something other than a button (an <a>, say), disabled becomes aria-disabled plus a blocked click handler, since non-form elements have no native disabled behaviour.
loading sets aria-busy without changing the button's width.