Button

A versatile button with five variants, four sizes, a loading state, and full keyboard accessibility.

Preview

Usage

import { Button } from "anexui";

<Button variant="primary" size="md" onClick={() => {}}>
  Save changes
</Button>

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Delete</Button>

Sizes

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Loading state

<Button variant="primary" loading>Saving…</Button>

Disabled

<Button variant="primary" disabled>Disabled</Button>

Props

| Prop | Type | Default | Description | |---|---|---|---| | variant | "primary" \| "secondary" \| "outline" \| "ghost" \| "danger" | "primary" | Visual style | | size | "xs" \| "sm" \| "md" \| "lg" | "md" | Button size | | loading | boolean | false | Shows spinner and sets aria-busy; disables interaction | | disabled | boolean | false | Disables the button | | type | "button" \| "submit" \| "reset" | "button" | HTML button type |

All standard HTML <button> attributes are accepted.

Accessibility

• Uses a native <button> element
• aria-busy="true" is set automatically during loading
• type="button" by default to prevent accidental form submission