Button Variants
Primary Button
Main call-to-action buttons with Genentech blue (#003087)
Secondary Button
Alternative actions and secondary options with gray styling
Warning Button
Destructive actions with high visual impact and Roche Red (#C8102E)
Warning Secondary Button
Secondary warning actions with transparent background and warning border
Warning Text Button
Subtle warning actions displayed as text-only with warning color
Link Button
Navigation actions styled as text links with Roche Blue (#06C)
Button Sizes
Small Size (sm)
4px vertical padding, 12px horizontal padding, 14px font size
Medium Size (md) - Default
6px vertical padding, 16px horizontal padding, 16px font size
Large Size (lg)
12px vertical padding, 24px horizontal padding, 16px font size
Real-World Examples
Form Actions
Common pattern: Secondary for cancel, Primary for submit
Navigation Actions
Navigation pattern: Link for previous, Primary for forward progress
Destructive Actions
Warning variant for destructive actions with high visual impact
Warning Action Hierarchy
Visual hierarchy for warning actions: Text for subtle, Secondary for medium, Primary for high impact
Mixed Action Groups
Visual hierarchy: Link for low priority, Secondary for medium, Primary for main action
Button Icons
Icons with Text
Icons can be positioned left or right of button text
Icon-Only Buttons
Icon-only buttons for compact interfaces (always include title for accessibility)
Link Buttons with Icons
Link variant buttons with icons for navigation and secondary actions