Stats
Actions
Tags
From f-rha-button
Use when the user wants to use, customize, or ask about the Button component from the f-rha library. Covers variants (primary, secondary, outline), sizes (sm, md, lg), fullWidth mode, disabled state, and click handling.
How this skill is triggered — by the user, by Claude, or both
Slash command
/f-rha-button:buttonThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A clickable button component with multiple styles and sizes.
A clickable button component with multiple styles and sizes.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Button label / content |
variant | "primary" | "secondary" | "outline" | "primary" | Visual style |
size | "sm" | "md" | "lg" | "md" | Button size |
fullWidth | boolean | false | Expands button to full width |
disabled | boolean | false | Disables the button |
onClick | () => void | — | Click handler |
import { Button } from "f-rha";
<Button variant="primary" size="md" onClick={() => console.log("clicked")}>
Submit
</Button>
<Button variant="outline" disabled>
Cancel
</Button>
<Button fullWidth variant="primary">
Full Width Button
</Button>
fullWidth prop for 100% width buttonsnpx claudepluginhub dio-chu/f-rha-marketplace --plugin f-rha-buttonGuides usage of smarthr-ui Button, UnstyledButton, and AnchorButton components with accessibility and design system best practices for React.
Builds production-ready frontend components with accessible markup, sensible props, and defined states. Use when creating, refactoring, or designing component APIs.
Build reusable styled components with Tailwind, CVA variants, and polymorphic prop patterns. Provides a production pattern for Button and similar components with className merging and asChild support.