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.

Installation

You can add this component using our CLI or manually:

$npx omnira-ui@latest add utility

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