Component

Button

Render primary actions, secondary actions, icon buttons, loading states, and asChild links.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Button } from "@chitrank2050/monoline-ui/button"

Basic usage

<Button variant="primary" size="md">
  Contact me
  <Button.Arrow />
</Button>

<Button variant="secondary" size="md">Resume</Button>
<Button variant="ghost" size="md">
  View projects
  <Button.Arrow />
</Button>
<Button variant="secondary" size="md">
  Book a call
  <Button.Arrow reveal />
</Button>
<Button loading>Saving</Button>
<Button variant="secondary" loading>Saving</Button>
<Button variant="ghost" loading>Saving</Button>
<Button disabled>Disabled</Button>
<Button asChild>
  <a href="/contact">Contact</a>
</Button>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Choose Button for a discrete action, an action link, an icon control, or a loading submission state.

Avoid when

The control represents persistent on-off state, a radio-style choice, or an entire clickable card.

Accessibility

Button defaults to type button, exposes loading through aria-busy and aria-disabled, and requires an accessible name for icon-only use or any semantic element supplied through asChild.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantprimary | secondary | ghostVisual intent

sizesm | md | lgButton scale

iconbooleanSquare icon-only dimensions

pillbooleanFully rounded button

loadingbooleanBusy state with spinner and disabled behavior

asChildbooleanRender a child element through Radix Slot

Button.Iconcompound slotLeft/right icon with optional reveal animation

Button.Arrowcompound slotRight arrow shortcut over Button.Icon

Design tokens

Theme variables this component reads for color, spacing, and motion.

--duration-microCSS varHover, focus, and press transition duration

--duration-shortCSS varOpt-in icon reveal transition duration

--focus-ringCSS varAccessible focus shadow

--button / --button-hoverCSS varSecondary button surface

Implementation

The source used by the example above, including any state it needs.

import { Button } from "@chitrank2050/monoline-ui/button"

export function Actions() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Contact me</Button>
      <Button variant="secondary">Resume</Button>
      <Button variant="ghost">View projects<Button.Arrow /></Button>
      <Button variant="secondary">Book a call<Button.Arrow reveal /></Button>
      <Button loading>Saving</Button>
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentAction RailComponent · ReferenceReference→02ComponentToggleComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview