Button

A clickable action. Variants cover the hierarchy levels you reach for in most UIs; sizes map to the density of the surrounding layout.

Usage

import { Button } from '@mikata/ui';

<Button variant="filled" size="md" onClick={...}>
  Click me
</Button>

Live demo

Tweak the controls below - the preview updates on every change. This page was server-rendered with default props; when the JavaScript loads, the playground hydrates and becomes interactive.

size

variant

label

disabled

Props

variant - 'filled' | 'outline' | 'light' | 'subtle' | 'transparent'. Defaults to 'filled'.
size - 'xs' | 'sm' | 'md' | 'lg' | 'xl'. Defaults to 'md'.
disabled - boolean. Prevents click handlers from firing and applies a muted style.
loading - boolean. Shows a spinner in place of the children and disables the button.