Button & Link Inventory

Comprehensive catalog of all button and link styles used across the Bruin website

Internal use only - Not for publication

Primary Button Styles

1. Primary Dark Button (Bruin Brand)

Used in: Documentation links, primary CTA links

File: app/pages/product/mcp.vue:42

rounded-md bg-bruin-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-bruin-500 transition-colors inline-flex items-center gap-2

2. Primary Dark Button (Gray/Black)

Used in: Main form submissions

File: app/components/index/ContactUsForm.vue:21

flex-none rounded-lg text-white bg-gray-900 hover:bg-gray-800 px-6 py-3 text-sm font-medium shadow-sm focus-visible:outline transition-all

3. Primary Indigo Button

Used in: Ingestion form submissions

File: app/components/ingestion/ContactForm.vue:132

rounded-lg bg-indigo-600 px-8 py-3 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed

4. Primary Bruin Button (Modal/Dialog)

Used in: Dialog/modal confirmation buttons

File: app/components/RequestSourceForm.vue:44

inline-flex w-full justify-center rounded-lg bg-bruin-600 hover:bg-bruin-700 px-3 py-2 text-sm font-medium text-white shadow-sm transition-all

5. Slack/Purple Button

Used in: Slack community links

File: app/components/index/SlackAISection.vue:186

Join Slack community

inline-flex items-center justify-center rounded-md bg-[#4A154B] px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-[#611f69] transition-colors

Secondary Button Styles

6. Secondary Light Button (Gray)

Used in: Secondary CTAs, documentation links

File: app/components/index/SlackAISection.vue:196

Learn more

inline-flex items-center justify-center rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-200 transition-colors

7. Outlined Secondary Button (White with Border)

Used in: Cancel buttons in forms

File: app/components/ingestion/ContactForm.vue:128

rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50

8. Outlined Secondary Button (Bruin Focus)

Used in: Modal cancel buttons

File: app/components/RequestSourceForm.vue:178

rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-bruin-500

9. Conditional Disabled Button

Used in: Form submission buttons with validation

File: app/components/RequestSourceForm.vue:183

Dynamic: bg-gray-400 cursor-not-allowed (disabled) OR bg-bruin-600 hover:bg-bruin-700 (enabled)

Icon Buttons

10. Icon Button (Mobile Menu Toggle)

Used in: Navigation icon buttons

File: app/components/Navbar.vue:188

-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700

11. Icon Button (Close Dialog)

Used in: Dialog close buttons

File: app/components/Navbar.vue:208

-m-2.5 rounded-md p-2.5 text-gray-700

12. Copy Button (With Active State)

Used in: Copy-to-clipboard buttons

File: app/components/index/InstallCommand.vue:29

flex-shrink-0 p-2 rounded-lg hover:bg-gray-800 transition-colors + conditional bg-green-900/30

14. Pill Badge Buttons (Reaction Buttons)

Used in: Emoji reaction buttons

File: app/components/index/SlackAISection.vue:118

flex items-center gap-1 px-2 py-0.5 bg-[#F8F8F8] hover:bg-gray-100 border border-gray-200 rounded-full text-xs

15. Small Icon Action Buttons

Used in: Utility action buttons (add, emoji, attachment)

File: app/components/index/SlackAISection.vue:134

p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded

Tab & Toggle Buttons

16. Tab Button (Active State)

Used in: View mode toggles

File: app/pages/product/ingestion.vue:159

Dynamic: bg-bruin-600 text-white (active) OR bg-white text-gray-700 border border-gray-300 (inactive) + base: px-4 py-2 rounded-lg text-sm font-medium transition-colors

17. Setup Guide Tabs

Used in: Navigation tabs

File: app/pages/product/mcp.vue:103

Dynamic: bg-bruin-50 text-bruin-700 ring-1 ring-bruin-200 (active) OR text-gray-600 hover:text-gray-900 hover:bg-gray-50 (inactive) + base: group relative flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-all

Link Styles

13. Ghost Button (Minimal)

Used in: Subtle links, secondary CTAs

File: app/pages/product/mcp.vue:49

View on GitHub

text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors inline-flex items-center gap-1

18. Navbar Link (Primary)

Used in: Main navigation links

File: app/components/Navbar.vue:158

Blog Docs Product

text-sm font-normal transition-colors text-gray-700 hover:text-gray-900

20. CTA Link (Learn More Arrow)

Used in: Call-to-action links

File: app/components/Navbar.vue:180

text-sm font-normal transition-colors text-gray-700 hover:text-gray-900

21. Footer Link

Used in: Footer navigation links

File: app/components/Footer.vue:22

About Privacy Terms

text-sm leading-6 text-gray-600 hover:text-gray-900

Special Buttons

23. Request New Source Button (CTA in Callout)

Used in: Prominent CTAs in callout sections

File: app/pages/product/ingestion.vue:107

inline-flex items-center whitespace-nowrap px-5 py-2.5 bg-white text-bruin-600 font-medium rounded-lg hover:bg-bruin-50 transition-colors shadow-lg

Button Variants Summary

Style	Background	Text Color	Hover	Border	Use Case
Primary Dark (Bruin)	`bg-bruin-600`	`text-white`	`hover:bg-bruin-500`	None	Main CTAs
Primary Dark (Gray)	`bg-gray-900`	`text-white`	`hover:bg-gray-800`	None	Form submission
Primary Indigo	`bg-indigo-600`	`text-white`	`hover:bg-indigo-700`	None	Ingestion forms
Secondary Light	`bg-gray-100`	`text-gray-900`	`hover:bg-gray-200`	None	Secondary CTAs
Outlined	`bg-white`	`text-gray-700`	`hover:bg-gray-50`	`border-gray-300`	Cancel buttons
Slack Purple	`bg-[#4A154B]`	`text-white`	`hover:bg-[#611f69]`	None	Social links
Ghost	None	`text-gray-600`	`hover:text-gray-900`	None	Minimal links
Pill/Badge	`bg-[#F8F8F8]`	`text-xs`	`hover:bg-gray-100`	`border-gray-200`	Reactions
Icon Button	None	`text-gray-500`	`hover:bg-gray-100`	None	Utility actions
Tab (Active)	`bg-bruin-50`	`text-bruin-700`	N/A	`ring-bruin-200`	Tab navigation

Common Patterns & Utilities

Spacing Patterns

px-5 py-2.5 - Small buttons
px-6 py-3 - Medium buttons
px-8 py-3 - Large buttons
px-4 py-2 - Compact buttons
p-2 - Icon buttons

Border Radius

rounded-md - Standard (6px)
rounded-lg - Large (8px)
rounded-full - Pill shape
rounded-xl - Extra large

Typography

text-sm - Standard button text
text-xs - Small badges
font-medium - Most buttons
font-semibold - Emphasis buttons
font-normal - Nav links

Transitions

transition-colors - Most common
transition-all - Complex animations
duration-300 - When specified

Focus States

focus:outline-none
focus:ring-2
focus:ring-offset-2
focus-visible:outline

Custom Colors

bruin-* - Brand color series
gray-* - Grayscale
indigo-* - Accent color
[#4A154B] - Slack purple

Key Observations

Inconsistencies Found:

• Multiple color schemes for primary buttons (bruin-600, gray-900, indigo-600)
• Inconsistent padding values (px-5 py-2.5 vs px-6 py-3 vs px-8 py-3)
• Different border radius preferences (rounded-md vs rounded-lg)
• Varying focus ring implementations (indigo vs bruin vs gray)
• Mix of <a> tags and <button> elements styled similarly
• Some buttons use font-medium, others use font-semibold
• Inconsistent use of transition-colors vs transition-all

Recommendations for Normalization:

1. Standardize on Bruin brand colors for primary actions
2. Create consistent size variants (sm, md, lg) with uniform padding
3. Unify border radius (suggest rounded-lg for all buttons)
4. Standardize focus ring colors to match button type
5. Create reusable button components instead of inline classes
6. Use <button> for actions, <a> only for navigation
7. Establish clear hierarchy: Primary (Bruin), Secondary (Gray), Tertiary (Ghost)
8. Document when to use each variant in a design system