v4.2 now available

Build better UIs, together.

Framework is an open-source component library with accessible primitives, themeable design tokens, and copy-paste code — everything your team needs to ship polished interfaces faster.

View Documentation Getting Started

Open Source

MIT-licensed and built in the open. Every decision lives in a public roadmap, and community PRs ship in every release.

Accessible

WCAG 2.2 AA out of the box. Keyboard navigation, focus management, and screen-reader semantics are baked into every component.

Customizable

Design tokens, variants, and theming APIs let you restyle the entire system without forking a single component.

Welcome to the docs

Everything you need to install, learn, and build with Framework — from your first component to a fully themed production app.

Component Catalog

Browse the library and pick the building blocks for your next screen. Click any component to open its full reference.

Button

Buttons trigger actions. Use them for form submissions, dialogs, and navigation — in three visual variants and three sizes.

Open in Playground

Overview

The Button component is a polymorphic element: it renders a <button> by default and can render an anchor for navigation. All states — hover, focus, active, disabled, and loading — are built in.

Usage

Pick primary for the main action on a screen, secondary for supporting actions, and ghost for low-emphasis actions inside toolbars or dense layouts.

variant="primary" | "secondary" | "ghost"

API

variant, size, icon, disabled, and fullWidth compose freely. See the playground for a live preview of every combination.

Examples

Every example below is interactive — try hovering and focusing each button, or remix them in the playground.

icon="plus" · icon="download" · disabled

Accessibility

Buttons ship with a minimum 44px hit target, a visible :focus-visible ring, and announced loading states. Icon-only buttons require an aria-label.

Keyboard support

Activate with Enter or Space; focus rings never removed.

Screen readers

Loading and disabled states are announced via aria-live.

Contrast

All variants pass WCAG AA at 4.5:1 on light and dark themes.

Reduced motion

Hover lifts and transitions respect prefers-reduced-motion.

Back to Button Reference

Controls

Live preview variant="primary" size="medium"
Generated Code 
<Button variant="primary" size="medium" />
Copied to clipboard