Button

A clickable element that triggers an action or event.

Overview

The Button component triggers actions or navigation. It supports a variety of visual variants, sizes, shapes, and states including loading and disabled. Use it as a primary call-to-action, a secondary control, or an icon-only affordance.

Use primary for the main call-to-action on a page — limit to one per section for visual clarity.
Use secondary or outline for supporting actions, and ghost for inline or tertiary controls.
Reserve semantic variants (success, error, warning, info) for actions with explicit status outcomes.

Accessibility

Renders as a native <button> element with built-in keyboard support.
Space or Enter activates the button.
When loading is set, the button shows a spinner overlay with role="status" and becomes non-interactive.
When disabled, the button is removed from the tab order and cannot receive focus.
Use the render prop to render as a link (<a>) when the button navigates to a URL, preserving semantic meaning.

Import

import { Button } from "@cocso-ui/react";

Variant

Use variants to communicate the intent of an action. primary is the default high-emphasis style; use secondary, outline, or ghost for lower emphasis. State variants (success, error, warning, info) convey semantic meaning.

import { Button } from "@cocso-ui/react";

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="success">Success</Button>
      <Button variant="error">Error</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
    </div>
  );
}

Size

Four sizes are available. Choose based on context and surrounding content density.

import { Button } from "@cocso-ui/react";

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button size="large">Large</Button>
      <Button size="medium">Medium</Button>
      <Button size="small">Small</Button>
      <Button size="x-small">X-Small</Button>
    </div>
  );
}

Shape

Use square for standard rectangular buttons, rounded for a pill style, and combine circle with svgOnly for icon-only circular buttons.

import { Button } from "@cocso-ui/react";
import { PlusIcon } from "@cocso-ui/react-icons";

export default function ButtonShapes() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button shape="square">Square</Button>
      <Button shape="rounded">Rounded</Button>
      <Button shape="circle" svgOnly><PlusIcon size={18} /></Button>
    </div>
  );
}

Loading

Set loading to display a spinner and disable interaction while an async operation is in progress.

import { Button } from "@cocso-ui/react";

export default function ButtonLoading() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button loading variant="primary">Loading</Button>
      <Button loading variant="secondary">Loading</Button>
      <Button loading variant="outline">Loading</Button>
    </div>
  );
}

Prefix & Suffix

Use prefix and suffix to place an icon or element before or after the button label.

import { Button } from "@cocso-ui/react";
import { ArrowForwardIcon, PlusIcon } from "@cocso-ui/react-icons";

export default function ButtonPrefixSuffix() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button prefix={<PlusIcon size={16} />}>Add item</Button>
      <Button suffix={<ArrowForwardIcon size={16} />}>Continue</Button>
      <Button prefix={<PlusIcon size={16} />} suffix={<ArrowForwardIcon size={16} />}>Both</Button>
    </div>
  );
}

Disabled

Set disabled to prevent interaction. Disabled buttons appear visually dimmed and cannot be focused.

import { Button } from "@cocso-ui/react";

export default function ButtonDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Button disabled variant="primary">Disabled Primary</Button>
      <Button disabled variant="outline">Disabled Outline</Button>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "success" \| "error" \| "warning" \| "info"`	`"primary"`	Controls the background and text color to communicate the intent of the action. Use `primary` for the main call-to-action and `ghost` for minimal visual weight.
`size`	`"large" \| "medium" \| "small" \| "x-small"`	`"medium"`	Controls the height, padding, and font size. Use `large` for primary page actions and `x-small` for compact toolbars.
`shape`	`"square" \| "circle" \| "rounded"`	`"square"`	Controls the border-radius. Use `square` for standard actions, `rounded` for pill-shaped labels, and `circle` with `svgOnly` for icon-only buttons.
`disabled`	`boolean`	`false`	Prevents interaction and visually dims the button. Disabled buttons are excluded from the tab order.
`loading`	`boolean`	`false`	Overlays a spinner and prevents interaction. Use during async operations like form submission or API calls.
`prefix`	`ReactNode`	-	Element rendered before the label.
`suffix`	`ReactNode`	-	Element rendered after the label.
`svgOnly`	`boolean`	`false`	Removes text padding and renders the button as a square icon container. Combine with `circle` shape for round icon buttons.
`weight`	`FontWeight`	`"medium"`	Overrides the default font weight of the label text.
`spinnerVariant`	`SpinnerVariant`	-	Overrides the spinner color when loading. Useful when the default spinner does not contrast well against a custom background.
`render`	`RenderProp`	-	Replaces the default `<button>` element for polymorphic rendering. For example, pass `<a>` to render a link that looks like a button.