Button
A native button, ready for forms and small interactions.
Usage
import { Button } from '@fwenthehunter/friendly-ui';
<Button>Continue</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost" size="sm">Learn more</Button>
<Button type="submit">Save changes</Button>Custom variant names such as danger are supported; their styles come from your theme file. The danger preview uses CSS supplied by this documentation app. Defaults to type="button" to avoid accidental form submissions. Set type="submit" explicitly inside a form. Use a client wrapper for onClick behavior.
Provide visible text or an accessible name for icon-only buttons. For navigation, use a link rather than a button.
Customize this component
- Choose a name.
- Add its CSS to your app’s theme.css, imported after the package styles.
- Pass the same name to the prop. No registration, provider, or package edits are needed. Built-in TypeScript suggestions remain available.
A custom name alone does not create styles: until its CSS is loaded, it inherits the component’s base appearance. The examples below are application styles, not additional package defaults.
Add a variant
Variant chooses the appearance. This name is application-defined; it is not an extra built-in variant.
/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
.fui-button[data-variant="danger"] {
background: var(--fui-danger);
color: #fff;
}
}import { Button } from "@fwenthehunter/friendly-ui";
<Button variant="danger">Delete</Button>Add a size
Size controls dimensions independently of variant. Combine the two names on the same component.
/* app/theme.css — import after @fwenthehunter/friendly-ui/styles.css */
@layer components {
.fui-button[data-size="xl"] {
min-height: 3.5rem;
padding: 1rem 2rem;
font-size: 1.125rem;
}
}import { Button } from "@fwenthehunter/friendly-ui";
<Button size="xl" variant="danger">Delete</Button>Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.
| Prop | Type | Default |
|---|---|---|
variant | primary | secondary | ghost | custom string | primary |
size | sm | md | lg | custom string | md |
type | button | submit | reset | button |