BruinButton Component
Unified button component system based on Figma design specs
Internal demo - Not for publication
Quick Start
<BruinButton variant="primary">Click me</BruinButton>
<BruinButton variant="secondary" size="lg">Learn More</BruinButton>
<BruinButton variant="accent" to="/">Navigation</BruinButton>
<BruinButton variant="ghost" :disabled="true">Disabled</BruinButton>Button Variants
Primary
Main call-to-action buttons. Use for the primary action on a page.
<BruinButton variant="primary">Primary Button</BruinButton>Secondary (Outlined)
Secondary actions, cancel buttons, or less prominent CTAs.
<BruinButton variant="secondary">Secondary Button</BruinButton>Accent
Special promotional CTAs or high-emphasis actions that need extra attention.
<BruinButton variant="accent">Accent Button</BruinButton>Ghost (Minimal)
Subtle links and tertiary actions. No border or background by default.
<BruinButton variant="ghost">Ghost Button</BruinButton>Button Sizes
size="sm"
size="md"
size="lg"
Full Width Buttons
Use the block prop to make buttons span full width.
<BruinButton variant="primary" block>Full Width</BruinButton>Button States
Disabled State
Loading State
Buttons as Links
The component automatically renders as a link when you provide to or href props.
External Links
<BruinButton href="https://github.com" external>GitHub →</BruinButton>Props API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'accent' | 'accent-secondary' | 'ghost' | 'primary' | Button visual style |
| size | 'sm' | 'md' | 'lg' | 'md' | Button size |
| disabled | boolean | false | Disables the button |
| loading | boolean | false | Shows loading spinner and disables button |
| to | string | undefined | Internal route (renders as NuxtLink) |
| href | string | undefined | External URL (renders as anchor tag) |
| type | 'button' | 'submit' | 'reset' | 'button' | HTML button type |
| block | boolean | false | Makes button full width |
| external | boolean | false | Opens link in new tab (only for href) |
Figma Design Alignment
Design Specifications
- ✓ Colors match Figma design system (gray and bruin palettes)
- ✓ Typography: IBM Plex Sans Medium, 14px, 20px line-height
- ✓ Border radius: 8px (rounded-lg)
- ✓ Padding: 16px horizontal, 10px vertical (medium size)
- ✓ States: Normal, hover, disabled with proper opacity
- ✓ Focus states with outline for accessibility
- ✓ Supports both light and dark mode (via Tailwind)
Migration Guide
Replace existing inline button classes with the BruinButton component:
Before (Inline Classes)
<button class="rounded-lg bg-gray-900 hover:bg-gray-800 px-6 py-3 text-sm font-medium text-white shadow-sm"> Book a Demo </button>After (BruinButton)
<BruinButton variant="primary" size="lg"> Book a Demo </BruinButton>Note: Existing buttons will continue to work. Migrate gradually page by page.