Button

The control everything else borrows its API from — seven variants, a loading state and an optional ripple.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the snippet you write to get one.

01Variant

<Button variant="default | secondary | …" />

02Size

<Button size="xs | sm | default | lg | xl" />

03Icon size

<Button size="icon-sm | icon | icon-lg" />

04Rounded

<Button rounded="none | sm | default | lg | xl | full" />

05Elevation

<Button elevation="none | sm | default | md | lg | xl" />

06With icon

<Button startIcon={<Icon />} endIcon={<Icon />} />

07Loading

<Button loading loadingText="Saving…" />

08Disabled

<Button disabled />

09Full width

<Button fullWidth />

10Ripple

<Button ripple={true | false} />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Button } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

button-example.tsx

import { Button } from "kipui";

<Button variant="default" size="default" loading={saving} loadingText="Saving…">
  Save changes
</Button>

`loading` disables the button and swaps the label for `loadingText` — you don't need to disable it yourself.
`ripple` is on by default and is suppressed under `prefers-reduced-motion`.
Icon-only buttons still need an accessible name: pass `aria-label`.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

variantdefault

sizedefault

roundeddefault

elevationnone

fullWidth

disabled

<Button
  variant="default"
  size="default"
  rounded="default"
  elevation="none"
>
  Save changes
</Button>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
variant"default" \| "secondary" \| "outline" \| "ghost" \| "link" \| "destructive" \| "success"	"default"	Semantic role and colour.
size"sm" \| "default" \| "lg" \| "icon"	"default"	Height and padding.
rounded"default" \| "full" \| "none"	"default"	Corner radius.
elevation"none" \| "sm" \| "md" \| "lg"	"none"	Drop shadow.
loadingboolean	false	Spinner, disabled, and `loadingText` in place of children.
loadingTextstring	required	Label shown while loading.
startIconReactNode	required	Leading icon.
endIconReactNode	required	Trailing icon.
fullWidthboolean	false	Stretches to the container width.
rippleboolean	true	Press ripple. Off under reduced motion.