Button

Primary Button

Solid lime background for the most important actions. Available in four sizes.

Secondary Button

Bordered button with a subtle glass background. Use for secondary actions alongside a primary button.

Tertiary Button

Text-only button with no background or border. Use for low-emphasis actions like "Cancel" or inline links.

Icon Leading

Button with an icon placed before the text label. Use for actions that benefit from a visual cue.

Icon Trailing

Button with an icon placed after the text label. Common for "Next" or "Continue" actions.

Loading State

Buttons can show a loading spinner. Use showTextWhileLoading to keep the label visible alongside the spinner.

Disabled State

Disabled buttons have reduced opacity and no pointer events. All variants support the disabled state.

Full Width

Buttons can span the full width of their container.

Usage

Import the Button component and use it in your application.

import { Button } from "omnira-ui/Button";
import { ArrowRight2 } from "iconsax-react";

export default function MyPage() {
    return (
        <div>
            <Button variant="primary" size="lg">
                Get Started
            </Button>

            <Button
                variant="secondary"
                icon={<ArrowRight2 size={18} />}
                iconPosition="trailing"
            >
                Continue
            </Button>

            <Button variant="primary" isLoading showTextWhileLoading>
                Saving...
            </Button>
        </div>
    );
}