Components / Actions
Button
A focused action primitive with clear hierarchy, safe loading behavior, and link composition when navigation should look like an action.
Available in @kape/react
Variants and states
Primary, secondary, quiet, and destructive hierarchy across three sizes.
Installation and usage
Install both public packages, then import the component stylesheet once in your application.
Button usage
import { Button } from "@kape/react";
import "@kape/react/styles.css";
<Button variant="primary" size="md">
Save changes
</Button>Props
| Prop | Type | Default | Purpose |
|---|---|---|---|
variant | primary | secondary | quiet | danger | primary | Visual hierarchy |
size | sm | md | lg | md | Control height and density |
loading | boolean | false | Prevents activation and exposes busy state |
loadingLabel | string | Loading | Accessible name while loading |
iconOnly | boolean | false | Square treatment; requires aria-label |
asChild | boolean | false | Merges behavior into one child element |
Accessibility
- Native buttons default to
type="button". - Loading disables activation and exposes
aria-busy. - Icon-only usage requires an accessible name at the type level.
- Keyboard focus uses a high-contrast inset underline and border.
Keyboard
- Tab
- Moves focus to an enabled button.
- Enter
- Activates the focused button or link.
- Space
- Activates a native button.
Composition and limitations
Use asChild only when another semantic element owns the interaction, such as a Next.js Link. The child must accept merged props and a ref. Button does not implement toggles or menu triggers; those behaviors belong to dedicated components.