Components

Button

Text button in four contract variants (plus danger ghost) and three sizes (plus xl), with icons and a loading state.

Usage

Use it to:

trigger an action: save, create, confirm, open a menu
primary once per view for the main action; danger to confirm destructive actions

Don’t use it to:

navigate between pages (use Link, or Button asChild with a link when it must look like a button)
an icon without text (use IconButton)

terminal

npm install @krackedui/motion

terminal

pnpm add @krackedui/motion

terminal

yarn add @krackedui/motion

/src/main.tsx

import '@krackedui/motion/styles.css';

/src/ButtonExample.tsx

import { Button } from '@krackedui/motion';

export function ButtonDemo() {
  return (
    <Button variant="primary">New page</Button>
  );
}

The spinner replaces the content without changing the width; clicks are ignored and aria-busy is set.

Use asChild to put the button styles on your own element, such as a link.

A <button>; supports all of its props. Adds:

Prop	Type	Default
variant	`"primary""secondary""ghost""danger""danger-ghost"`	`"ghost"`
size	`"sm""md""lg""xl"`	`"md"`
icon	`IconName`
trailingIcon	`IconName`
loading	`boolean`	`false`
full	`boolean`	`false`
type	`"button""submit""reset"`	`"button"`
disabled	`boolean`	`false`
asChild	`boolean`	`false`

Tab focuses the button; Enter and Space activate it. The blue focus ring shows on keyboard focus.
Defaults to type="button", so it never submits a form by accident; pass type="submit" for the form’s main action.
loading keeps the accessible name, sets aria-busy and aria-disabled, and keeps focus on the button.
Icon-only actions need a name: use IconButton. On touch screens every button is at least 24×24.

ON THIS PAGE