Button

A labelled action with consistent emphasis, size and keyboard behavior.

Activate the button to test the callback.

Interactions use local sample data.

Usage and props

Use for an action such as saving or opening a panel. Give it clear text; use IconButton when the action only has an icon. Use a link for navigation.

childrenReactNode (optional): The visible button label.
onClick(event: MouseEvent<HTMLButtonElement>) => void (optional): Handles activation. Track pending, success and failure in your application.
type'button' | 'submit' | 'reset' (optional): Defaults to button. Set submit when it should submit a form.
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' (optional): Visual emphasis. Defaults to primary; danger suits a destructive action.
size'default' | 'sm' (optional): Use sm for a compact secondary action. Omit it for the regular size.
disabledboolean (optional): Prevents activation. Explain unavailable actions near the button.

These are the main props for the example. The package's TypeScript declarations include the full API.