Skip to content
Sisyphos UI

Button

Polymorphic, accessible button with four variants, five sizes, loading state, optional dropdown, and href support.

Forms & Inputs·Available inReactVueAngular·View as Markdown

Preview

tsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { Button } from "@sisyphos-ui/react";

export function Save() {
  return (
    <Button variant="contained" color="primary" onClick={() => console.log("save")}>
      Save changes
    </Button>
  );
}

Variants

Four visual treatments.

tsx

Semantic colors

Pick a color token to communicate intent.

tsx

Sizes

tsx

With icons

`startIcon` and `endIcon` accept any ReactNode — drop in a lucide icon or inline SVG.

tsx

Loading state

`aria-busy` is set and click is suppressed while loading.

tsx

Real world — sign-in form

Primary submit with a text-variant secondary action.

tsx

Real world — pricing CTA

Full-width primary CTA with an inline compare link.

tsx
Team
$29 / month

Up to 10 seats, unlimited projects.

Real world — editor toolbar

Dense text buttons grouped around a primary publish action.

tsx
Draft saved

API

PropTypeDefaultDescription
variant"contained" | "outlined" | "text" | "soft""contained"Visual treatment.
color"primary" | "success" | "error" | "warning" | "info""primary"Semantic color token.
size"xs" | "sm" | "md" | "lg" | "xl""md"Button size.
loadingbooleanfalseShow a loading spinner; suppresses clicks.
startIconReactNode—Icon rendered before the label.
endIconReactNode—Icon rendered after the label.
hrefstring—When set, renders the button as an anchor.
dropdownItemsButtonDropdownItem[]—Inline split-button menu items.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Button WAI-ARIA design pattern.

  • aria-busy applied while loading; click suppressed.
  • aria-disabled mirrors disabled.
  • Dropdown uses aria-haspopup="menu" + aria-expanded; items expose role="menuitem".

Keyboard interactions

KeyAction
EnterActivates the button.
SpaceActivates the button.
TabMoves focus to the next focusable element.
ArrowDownOn a split button, opens the dropdown menu.
Need more?View on npm →
Was this page helpful?