Utility Button

Stable

Small icon-only buttons with tooltip on hover. Use for toolbar actions, close buttons, and inline controls. Available in four sizes and four color variants.

Secondary

The default variant. Bordered glass-style buttons that blend with the Omnira UI design system. Hover to see tooltips.

Secondary — xs

Secondary — sm

Secondary — md

Secondary — lg

Primary

Solid lime background for high-emphasis utility actions.

Primary — All Sizes

Primary — Actions

Tertiary

Ghost-style buttons with no background or border. Minimal and unobtrusive for inline actions.

Tertiary — All Sizes

Tertiary — Close Button

Destructive

Red-tinted hover state for dangerous actions like delete or remove.

Destructive — All Sizes

Destructive — Close

Disabled State

Disabled utility buttons have reduced opacity and no hover effects or tooltips.

Disabled — All Colors

Disabled — All Sizes (Secondary)

Size Comparison

All four sizes side by side for each color variant.

All Sizes — Secondary

Usage

Import the ButtonUtility component and pass an icon element with an optional tooltip.

tsx
import { ButtonUtility } from "omnira-ui/ButtonUtility";
import { Copy, Trash, Edit2, CloseCircle } from "iconsax-react";

export default function Toolbar() {
    return (
        <div style={{ display: "flex", gap: 8 }}>
            <ButtonUtility
                size="sm"
                color="secondary"
                tooltip="Copy"
                icon={<Copy size={16} variant="Bold" color="currentColor" />}
                onClick={() => console.log("copied")}
            />
            <ButtonUtility
                size="sm"
                color="secondary"
                tooltip="Edit"
                icon={<Edit2 size={16} variant="Bold" color="currentColor" />}
            />
            <ButtonUtility
                size="sm"
                color="destructive"
                tooltip="Delete"
                icon={<Trash size={16} variant="Bold" color="currentColor" />}
            />
            <ButtonUtility
                size="sm"
                color="tertiary"
                tooltip="Close"
                icon={<CloseCircle size={16} variant="Bold" color="currentColor" />}
            />
        </div>
    );
}

Props

PropTypeDefaultDescription
iconReactNode—Icon element to render inside the button
size"xs" | "sm" | "md" | "lg""sm"Button size — xs (28px), sm (36px), md (44px), lg (52px)
color"primary" | "secondary" | "tertiary" | "destructive""secondary"Color variant
tooltipstringundefinedTooltip text shown on hover after a short delay
disabledbooleanfalseDisabled state — reduced opacity, no hover, no tooltip