ReactButton
An action with six visual variants, three sizes and a loading state.
Give your AI assistant this page as context.
Connect your library with MCPui/buttonUsage
Get this component from a saved library export or the connected CLI. The imports below refer to local files installed in your app.
Import styles/components.css, then styles/theme.css once. Wrap your app in ThemeScope from components/ui/utils so typography, focus and overlays share the theme. The installation guide covers runtime dependencies and React/Next.js setup.
import { Button } from './components/ui/button';
<Button>Continue</Button>Design system
This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in Export.
Behavior and accessibility
- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.
Status: experimental during early access. Sample previews do not send emails, process payments or upload files to a service.
Source and props
This is the exported source, using the same implementation as the editor.
"use client";
import type { ComponentProps } from "react";
import { Button as BaseButton } from "@base-ui/react/button";
import { cx } from "./utils";
export type ButtonProps = Omit<
ComponentProps<typeof BaseButton>,
"className"
> & {
className?: string;
variant?:
"primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
size?: "sm" | "md" | "lg";
loading?: boolean;
};
export function Button({
className,
variant = "primary",
size = "md",
loading = false,
disabled,
children,
...props
}: ButtonProps) {
return (
<BaseButton
{...props}
disabled={disabled || loading}
aria-busy={loading || props["aria-busy"] || undefined}
className={cx("cr-button", className)}
data-variant={variant}
data-size={size}
>
{loading && <span className="cr-spinner" aria-hidden="true" />}
{children}
</BaseButton>
);
}