Button

Examples

Overview

Button is the primary interactive element for triggering actions. It supports multiple variants for different emphasis levels, five sizes, icons, loading states, and accessibility features out of the box.

import { Button } from "@rogo-technologies/ui/button";

<Button variant="brand" size="md">
  Click me
</Button>;

Usage

Variants

<Button variant="brand">Save changes</Button>
<Button variant="outline">Cancel</Button>
<Button variant="muted">Edit</Button>
<Button variant="ghost">More options</Button>
<Button variant="destructive">Delete</Button>
<Button variant="text">Learn more</Button>
<Button variant="link">View documentation</Button>

Sizes

<Button size="xxs">Tag</Button>
<Button size="md">Submit</Button>
<Button size="lg">Get started</Button>

With icons

Use prefix for an icon before the label or suffix for one after. Icons automatically scale to match the button size.

import { IconPlus, IconArrowRight } from "@rogo-technologies/ui/icons";

<Button prefix={<IconPlus />}>Add item</Button>
<Button suffix={<IconArrowRight />}>Continue</Button>
<Button prefix={<IconPlus />} suffix={<IconArrowRight />}>
  Add and continue
</Button>

Loading

When loading is true, a spinner replaces the prefix icon, the button becomes disabled, and aria-busy is set. Width stays stable to prevent layout shift.

const [isLoading, setIsLoading] = useState(false);

async function handleSubmit() {
  setIsLoading(true);
  await saveData();
  setIsLoading(false);
}

<Button loading={isLoading} onClick={handleSubmit}>
  Save changes
</Button>;

Disabled

<Button disabled={!isFormValid}>Submit</Button>
<Button disabled={isLoading}>Save</Button>

Icon only

Always provide an aria-label for accessibility.

<Button iconOnly aria-label="Open settings">
  <IconSettingsGear3 />
</Button>

<Button variant="ghost" iconOnly aria-label="More options">
  <IconMoreHorizontal />
</Button>

Rounded

Pill-shaped buttons. Works with all sizes and variants.

<Button rounded>Subscribe</Button>

<Button rounded iconOnly aria-label="Add">
  <IconPlus />
</Button>

As link

Render as a different element via render — e.g. a Next.js Link for navigation.

import Link from "next/link";

<Button render={<Link href="/dashboard" />}>Go to Dashboard</Button>

<Button render={<a href="https://example.com" target="_blank" />}>
  External link
</Button>

API

The Button accepts all standard HTML button attributes.

Guidelines

Do

• Use brand for the primary action on a page or in a modal
• Use outline or muted for secondary actions alongside a primary button
• Use ghost for tertiary or contextual actions (e.g., in toolbars)
• Use destructive only for irreversible or dangerous actions
• Provide aria-label for icon-only buttons
• Use loading state for async operations to provide feedback
• Keep button labels concise and action-oriented ("Save", "Delete", "Continue")

Don't

• Don't use multiple brand buttons in the same context — there should be one clear primary action
• Don't use destructive for non-dangerous actions just for visual emphasis
• Don't disable buttons without explaining why (consider a tooltip or helper text)
• Don't use icon-only buttons without aria-label — they're inaccessible to screen readers
• Don't mix too many button variants in one area — it creates visual noise
• Don't use text or link variants for important actions — they lack visual prominence