--- type: ai-agent-documentation version: 2.0 component: Button status: stable audience: ai-coding-agents-only human-readable: false category: actions framework-support: - vanilla: true - react: true - vue: true - angular: true - svelte: true --- # Component: Button DEFINITION: The Button component provides styled, accessible, and framework-agnostic buttons for user actions. It is a CSS-only component that works with ` ``` ### Structural Rules - **ALWAYS**: Use a ` ``` ### Pattern: Destructive Action ```html ``` ### Pattern: Button with Icon ```html ``` ### Pattern: Icon-only Button ```html ``` ### Pattern: Loading State ```html ``` ### Pattern: Button Group ```html
``` ## Anti-Patterns ### NEVER: Omit the base class ```html The base `.pm7-button` class contains essential styles like padding, font-size, and transitions. Modifier classes will not work without it. ``` ### NEVER: Combine multiple variants ```html ``` ### NEVER: Use non-semantic elements ```html
Click Me
`
` and `` are not keyboard accessible, do not have correct ARIA roles by default, and do not work with forms. ``` ## React Integration > **📚 Framework Integration Guide**: For Vue, Angular, and other framework integrations, see the comprehensive [Framework Integration Guide](https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-Framework-Integration.md) ### Event Handling in React PM7-UI buttons work seamlessly with React event handlers since they don't have internal event delegation like menus or dialogs: ```jsx function MyButton() { const handleClick = () => { console.log('Button clicked!'); }; return ( ); } ``` ### Loading State Management When managing loading states in React, ensure proper synchronization between state and DOM attributes: ```jsx function SaveButton() { const [isLoading, setIsLoading] = useState(false); const handleSave = async () => { setIsLoading(true); try { await saveData(); } finally { setIsLoading(false); } }; return ( ); } ``` ### Button Groups with State For button groups that represent a selection, manage the active state in React: ```jsx function ViewSelector() { const [view, setView] = useState('grid'); return (
); } ``` ### Dynamic Button Rendering When rendering buttons dynamically, PM7 styles will apply automatically: ```jsx function ActionButtons({ actions }) { return (
{actions.map((action) => ( ))}
); } ``` ### Key Points for React: - Regular React onClick handlers work perfectly with PM7 buttons - Manage loading states with both `disabled` attribute and `data-state` - Use conditional classes for active states in button groups - PM7 button styles are applied via CSS classes, no JavaScript initialization needed ## Rules ### ALWAYS - **ALWAYS**: Include the base `.pm7-button` class on every button. - **ALWAYS**: Specify `type="button"`, `type="submit"`, or `type="reset"` on every `
NameActions
John Doe
```