Buttons / React + CSS
Primary button
A straightforward primary action with hover, pressed, and disabled states.
"use client";
import styles from "./PressButton.module.css";
export default function PressButton({
children = "Continue",
onClick,
disabled = false,
variant = "solid",
}) {
return (
<button
type="button"
className={styles.button}
data-variant={variant}
disabled={disabled}
onClick={onClick}
>
{children}
</button>
);
}
Make it yours
Use for a primary action. Keep one clear priority per section. This is a button, so use a link for navigation.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
PressButton.jsxand the CSS asPressButton.module.cssin the same folder. - Import
PressButtonand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
children | ReactNode | Button label. Use an action verb. |
onClick | function | Connect the button to your application action. |
disabled | boolean | Prevents interaction when true. |
variant | "solid" | "outline" | "subtle" | Primary, secondary, or low-emphasis treatment. Defaults to solid. |
Accessibility & behavior
A native button supports Enter and Space. Disabled controls are skipped in the tab order; explain why an action is unavailable nearby.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.