Primitives
Button
A versatile button component with multiple variants, sizes, and states. Essential for all healthcare application interactions.
Variants
Use primary for main actions, secondary for less prominent actions, and danger for destructive operations.
Sizes
Choose the appropriate size based on context. Use larger buttons for primary actions in forms.
With Icons
Icons help users quickly identify button actions. Use left icons for actions and right icons for navigation.
Icon Only Buttons
Use for compact UI areas like toolbars. Always include an aria-label for accessibility.
Loading State
Show loading state during async operations like API calls. The button is automatically disabled.
Disabled State
Disable buttons when actions are not available. Provide context via tooltips or helper text.
Full Width
Use full-width buttons for form submissions or mobile-optimized layouts.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'primary' | Visual style of the button |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Size of the button |
loading | boolean | false | Shows loading spinner and disables the button |
disabled | boolean | false | Disables the button |
fullWidth | boolean | false | Makes the button take full container width |
iconOnly | boolean | false | Renders a square icon-only button |
iconLeft | Snippet | — | Icon slot for left side |
iconRight | Snippet | — | Icon slot for right side |
testId | string | — | Test ID for e2e testing |
Healthcare Best Practices
- • Use
variant="danger"for any action that deletes patient data - • Always show loading states for operations that access patient records
- • Include confirmation dialogs before critical actions
- • Use descriptive labels that clearly indicate the action being performed
- • Ensure proper keyboard navigation for accessibility compliance