Button
Triggers one action. One primary button per screen.
Variants
Seven variants, chosen by emphasis rather than by color.
Glass
Only on top of an image or a gradient band. Falls back to a solid surface.
Sizes
xs 28, sm 32, md 40 (desktop default), lg 48 (touch default).
States
Hover and focus appear on pointer devices. Loading keeps the label and locks the button.
Usage
import { Button } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- For actions: save, send, continue, delete.
- One primary button per screen or dialog.
When not to use
- To move to another page. Use Link.
- For an icon-only control. Use Icon Button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'soft' | 'neutral' | 'outline' | 'ghost' | 'danger' | 'danger-soft' | 'glass' | 'primary' | Level of emphasis. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | |
isLoading | boolean | false | Shows a spinner and blocks presses. |
fullWidth | boolean | false | |
leadingIcon, trailingIcon | ReactNode | - | |
onPress | (e) => void | - | Fires for mouse, touch and keyboard. |
isDisabled | boolean | false | Cannot be pressed or focused. |
Accessibility
- Label contrast is at least 4.5:1. White on the accent color is 6.0:1.
- Use lg on touch screens so the target is at least 44 px.
- Enter and Space press the button. Keyboard focus is always visible.