Button
Ten variants in three sizes and five states. A rolling label springs the width as it changes.
Features
- Neutral, danger, warning, outline, contrast, submit, accent, ghost, ghost muted, ghost faint and loading.
- Small, normal and large.
- Hover, pressed, focus and disabled, and a `state` prop to force one for documentation.
Use it for
- Every action on a page.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Button } from 'runets'
<Button variant="submit" size="large" icon={<Plus />}>Create</Button>
<Button variant="ghost-muted" state="hover">Forced hover</Button>API
| Prop | Type | What it does |
|---|---|---|
variant | ButtonVariant | Look; neutral by default. |
size | 'small' | 'normal' | 'large' | Height and type size. |
state | 'hover' | 'pressed' | 'focus' | 'disabled' | Forces a state. |
icon | ReactNode | Leading icon. |
Accessibility
- A native button; Enter and Space press it.
- Loading sets aria-busy and shows a spinner.
Source
The code is in src/kit/controls.tsx in runets, MIT licensed.