IconButton

Icon-only button. Wraps Button and renders a single Icon with an accessible label.

When to use

Use IconButton for any icon-only control (toolbar action, close/confirm, row action, …). It is the replacement for Button's deprecated isIconButton prop, so prefer it over <Button isIconButton>.

• For a normal button with a text label, use Button.
• For grouped or overflowing sets of buttons, see ButtonGroup and ButtonList.

Always pass label — it becomes the icon's aria-label, which is the only accessible name an icon-only button has. There is no @uxf/form twin.

Usage

import { IconButton } from "@uxf/ui/icon-button";

// action
<IconButton iconName="user" label="User" onClick={onClick} />

// styled + as a cancel action
<IconButton
    color="negative"
    iconName="xmark"
    label="Cancel"
    onClick={handleCancel}
    size="sm"
    variant="secondary"
/>;

Props

Extends Omit<ButtonProps, "children" | "isIconButton">, so all Button props except children and isIconButton are accepted (variant, color, size, isFullWidth, isDisabled, isLoading, as, href, onClick, type, analyticsCallback, …). Forwards its ref to the underlying anchor.

Variants & states

variant, color and size are inherited from Button and accept the same values (each defaults to "default"):

size also sets the square dimensions of the button (the width tracks the control height per size). Behavioural states (isLoading, isDisabled) behave as on Button.

Requirements

Import the component stylesheet once in your global CSS, together with the Button stylesheet it builds on:

@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon-button.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Links

• Figma