Button Sizing Standards

Standard Buttons

• Height: 24px (var(--button-height-standard))
• Font Size: 12px (var(--button-font-size-standard))
• Use for regular buttons throughout the application

Large Buttons (Header Buttons)

• Height: 48px (var(--button-height-large)) - exactly twice the standard height
• Font Size: 12px (var(--button-font-size-standard)) - same as standard
• Use for buttons in the top header (e.g., RepoSelector, BranchSelector triggers)

Implementation

• Use CSS variables from variables.css for consistency
• Standard buttons use .md size class by default
• Large buttons use .lg size class
• Always use height property instead of padding for vertical sizing
• Horizontal padding should be applied separately (e.g., padding: 0 14px)

Examples

/* Standard button */
.button {
  height: var(--button-height-standard);
  font-size: var(--button-font-size-standard);
  padding: 0 14px;
}

/* Large header button */
.trigger {
  height: var(--button-height-large);
  font-size: var(--button-font-size-standard);
  padding: 0 var(--space-3);
}