primitives/@mihcm/ui·v0.21.0·stable
Button
Primary action affordance. Seven variants, six sizes, icon slots, rounded or hard-edge shapes, and tokenized Tailwind class overrides. Universal across web and native.
Props
The full prop API for Button. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
variant | 'default' | 'accent' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'default' | Visual variant. One primary action per region. | 0.1.0 |
size | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'icon' | 'md' | Size scale. Use `xl` or `xxl` for prominent mobile and page-level actions. | 0.1.0 |
shape | 'rounded' | 'hard' | 'rounded' | `hard` removes radius for dense enterprise toolbars and edge-aligned layouts. | 0.8.0 |
isLoading | boolean | false | Sets `aria-busy`. Disables interactions while loading. | 0.1.0 |
disabled | boolean | false | Standard disabled state. | 0.1.0 |
leadingIcon | ReactNode | — | Icon rendered before children. | 0.1.0 |
trailingIcon | ReactNode | — | Icon rendered after children. | 0.1.0 |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type on web. Defaults to `button` so form buttons do not submit accidentally. | 0.1.0 |
className | string | — | Additional Tailwind classes merged last with `tailwind-merge`; use semantic token utilities to override borders, text, background, spacing, and focus states. | 0.1.0 |
Import
import { Button } from '@mihcm/ui/Button';