Button
An action or link with size, color, theme and loading state.
Use onClick for an action and href for navigation. loading shows progress; disabled blocks interaction — a disabled link does not call onClick either. An icon-only button is square; give it an aria-label or wrap it in a Tooltip.
Live example
Example controls
Usage
import { Button } from '@prosazhin/pbcomponents';
<Button
size='m'
theme='filled'
color='primary'
>
Button
</Button>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | string | Component content. | — |
size | 'xs' | 's' | 'm' | 'l'xs · s · m · l | Component size. | m |
theme | 'filled' | 'light' | 'border' | 'ghost'filled · light · border · ghost | Button appearance. | filled |
color | 'primary' | 'secondary' | 'success' | 'danger'primary · secondary · success · danger | Semantic color. | primary |
disabled | boolean | Disables interaction. | false |
loading | boolean | Shows a pending action. | false |
leftIcon | SvgTypenone · check · search · user | Icon before the text; accepts an SVG component. | — |
rightIcon | SvgTypenone · check · search · user | Icon after the text; accepts an SVG component. | — |
leftIconClassName | string | Class of the left icon. | — |
rightIconClassName | string | Class of the right icon. | — |
onClick | (event) => void | Click handler. | — |
href | string | Renders a link instead of a button. | — |
linkComponent | ElementType | Custom link component, such as Next.js Link. | — |
target | '_self' | '_blank'_self · _blank | Where to open the link. | _self |
type | 'button' | 'reset' | 'submit'button · reset · submit | HTML button type. | button |
className | string | Class of the root element. | — |
textClassName | string | Class of the text part. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.