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

Examples

Variants

Four visual weights, from the primary action to a destructive one.

Usage

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

With icons

iconStart/iconEnd, or an icon alone with aria-label for an icon-only button.

Usage

<Button variant="secondary" iconStart={<MagnifyingGlassIcon />}>
  Search
</Button>
<Button variant="primary" iconEnd={<CheckIcon />}>
  Mark as done
</Button>
<Button variant="ghost" aria-label="Copy" iconStart={<CopyIcon />} />

Disabled

Native disabled state — no aria-disabled workaround needed.

Usage

<Button disabled>Disabled</Button>

Rendered as a link

render swaps in a real <a> for actions that navigate instead of acting in place.

See pricing

Usage

// render swaps the underlying element — the action here
// navigates, so it should be a real <a>, not a <button>.
<Button render={<a href="/pricing/">See pricing</a>}>
  See pricing
</Button>

Playground

Toggle every adjustable prop and watch the button — and the code — update live. Use the Unstyled switch to preview the same DOM without Kernel visuals (same idea as omitting styles.css on Platforms).

Unstyled

Same component — Kernel look stripped. See Platforms.

variant

size

label

type

iconStart

iconEnd

disabled

Usage

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

<kernel-button variant="primary">Save changes</kernel-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.