A polymorphic action with five visual variants, four sizes, loading, disabled, icon, link, and button states.
PrimaryLoadingDisabledDanger
<Button variant="primary">Save changes</Button>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Button } from '@chanrg/4ui';<Button variant="primary">Save changes</Button>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary | secondary | ghost | subtle | danger | primary | Visual priority. |
size | sm | md | lg | icon | md | Control height and spacing. `icon` is square and text-free. |
ariaLabel | string | — | Accessible name. Required with size="icon", which shows no text. |
href | string | — | Renders an anchor when supplied. |
loading | boolean | false | Shows progress and prevents activation. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Loading sets aria-busy and disables repeated activation.
- Links and buttons retain their native semantics.