IconButton

A square button that shows only a lucide-react icon. Use it for compact toolbar actions; the required label gives it an accessible name.

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

Variants

ghost (the default) is borderless until hovered and suits dense toolbars. secondary, primary and danger mirror the Button variants.

import { Copy, Download, Power, Trash2 } from 'lucide-react';
import { IconButton } from 'jarvis-react-ui';

export default function Variants() {
    return (
        <>
            <IconButton icon={Copy} label="Copy" />
            <IconButton icon={Download} label="Download" variant="secondary" />
            <IconButton icon={Power} label="Power on" variant="primary" />
            <IconButton icon={Trash2} label="Delete" variant="danger" />
        </>
    );
}

Sizes

sm is a 24px square with a 12px icon, md (the default) is 30px with a 14px icon.

import { Settings } from 'lucide-react';
import { IconButton } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <>
            <IconButton icon={Settings} label="Settings" size="sm" variant="secondary" />
            <IconButton icon={Settings} label="Settings" size="md" variant="secondary" />
        </>
    );
}

Toggle

Pass pressed to turn the button into a toggle. It highlights the button and sets aria-pressed. Keep the label constant (for example "Mute") and let pressed carry the state.

import { useState } from 'react';
import { Volume2, VolumeX } from 'lucide-react';
import { IconButton } from 'jarvis-react-ui';

export default function Toggle() {
    const [muted, setMuted] = useState(false);

    return (
        <IconButton
            icon={muted ? VolumeX : Volume2}
            label="Mute"
            pressed={muted}
            onClick={() => setMuted((m) => !m)}
        />
    );
}

Disabled

import { RefreshCw } from 'lucide-react';
import { IconButton } from 'jarvis-react-ui';

export default function Disabled() {
    return (
        <>
            <IconButton icon={RefreshCw} label="Refresh" disabled />
            <IconButton icon={RefreshCw} label="Refresh" variant="secondary" disabled />
        </>
    );
}

With a tooltip

The label is only announced to assistive technology. Wrap the button in a Tooltip to show a hint to sighted users as well.

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 type="button"> with aria-label set from label.
• The icon is rendered with aria-hidden="true".
• pressed maps to aria-pressed; leave it undefined for a plain action button.
• The focus ring is visible on keyboard focus only (focus-visible).

API

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