Button

Buttons trigger an action. They come in four variants, two sizes, and play the hover and click sounds of the JARVIS sound set.

import { Button } from 'jarvis-react-ui';

Variants

Use primary for the main action of a view, secondary (the default) for regular actions, ghost for low-emphasis actions and danger for destructive ones.

import { Button } from 'jarvis-react-ui';

export default function Variants() {
    return (
        <>
            <Button variant="primary">Engage</Button>
            <Button>Standby</Button>
            <Button variant="ghost">Details</Button>
            <Button variant="danger">Abort</Button>
        </>
    );
}

Sizes

import { Button } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <>
            <Button size="sm">Small</Button>
            <Button size="md">Medium</Button>
        </>
    );
}

Disabled

A disabled button is dimmed, cannot be focused by click and does not fire onClick.

import { Button } from 'jarvis-react-ui';

export default function Disabled() {
    return (
        <>
            <Button variant="primary" disabled>
                Engage
            </Button>
            <Button disabled>Standby</Button>
        </>
    );
}

With an icon

Put an icon from lucide-react next to the label. Mark it aria-hidden because the label already names the action. For icon-only buttons use IconButton.

import { Power, Radar } from 'lucide-react';
import { Button } from 'jarvis-react-ui';

export default function WithIcon() {
    return (
        <>
            <Button variant="primary">
                <span className="inline-flex items-center gap-2">
                    <Power size={12} aria-hidden="true" /> Boot
                </span>
            </Button>
            <Button>
                <span className="inline-flex items-center gap-2">
                    <Radar size={12} aria-hidden="true" /> Scan
                </span>
            </Button>
        </>
    );
}

Sound

Hovering plays hover_button and clicking plays click through the nearest SfxProvider. Without a provider the button stays silent. See Sound effects.

Accessibility

• Renders a native <button>, so keyboard and screen reader support come for free.
• The focus ring is visible on keyboard focus only (focus-visible).
• The label is the accessible name; keep it short and verb-first.

API

Also accepts inherited props from ButtonHTMLAttributes (10), HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).