Usage
Use BB Button Bar classes to create responsive button groups that stack vertically on mobile and arrange horizontally on larger screens with primary actions aligned to the right.
<!-- Basic button bar -->
<div class="bb-button-bar">
<button class="bb-button-bar__button btn btn-primary">Primary action</button>
<button class="bb-button-bar__button btn btn-secondary">Secondary action</button>
<button class="bb-button-bar__button btn btn-tertiary">Tertiary action</button>
</div>
Available classes
Container classes
- bb-button-bar: Main container for button group
- bb-button-bar--reverse: Reverses button order on larger screens
- bb-button-bar--center: Centers buttons horizontally
- bb-button-bar--end: Aligns buttons to the end (right)
- bb-button-bar--sticky: Makes button bar sticky with background
<!-- Reversed button order: primary action appears last in HTML but first visually on desktop -->
<div class="bb-button-bar bb-button-bar--reverse">
<button class="bb-button-bar__button btn btn-tertiary">Tertiary action</button>
<button class="bb-button-bar__button btn btn-secondary">Secondary action</button>
<button class="bb-button-bar__button btn btn-primary">Primary action</button>
</div>
<!-- Centered alignment -->
<div class="bb-button-bar bb-button-bar--center">
<button class="bb-button-bar__button btn btn-primary">Confirm</button>
<button class="bb-button-bar__button btn btn-secondary">Cancel</button>
</div>
<!-- End alignment -->
<div class="bb-button-bar bb-button-bar--end">
<button class="bb-button-bar__button btn btn-primary">Save</button>
<button class="bb-button-bar__button btn btn-secondary">Cancel</button>
</div>
<!-- Sticky button bar -->
<div class="bb-button-bar bb-button-bar--sticky">
<button class="bb-button-bar__button btn btn-primary">Complete Order</button>
<button class="bb-button-bar__button btn btn-secondary">Save for Later</button>
<button class="bb-button-bar__button btn btn-tertiary">Cancel</button>
</div>
Spacing classes
- bb-button-bar--spacing-xs: Extra small top spacing
- bb-button-bar--spacing-sm: Small top spacing
- bb-button-bar--spacing-md: Medium top spacing
- bb-button-bar--spacing-lg: Large top spacing
- bb-button-bar--spacing-xl: Extra large top spacing
<!-- Extra small top spacing -->
<div class="bb-button-bar bb-button-bar--spacing-xs">
<button class="bb-button-bar__button btn btn-primary">Submit</button>
<button class="bb-button-bar__button btn btn-secondary">Cancel</button>
</div>
<!-- Medium top spacing -->
<div class="bb-button-bar bb-button-bar--spacing-md">
<button class="bb-button-bar__button btn btn-primary">Submit</button>
<button class="bb-button-bar__button btn btn-secondary">Draft</button>
<button class="bb-button-bar__button btn btn-tertiary">Cancel</button>
</div>
<!-- Large top spacing -->
<div class="bb-button-bar bb-button-bar--spacing-lg">
<button class="bb-button-bar__button btn btn-primary">Complete</button>
<button class="bb-button-bar__button btn btn-secondary">Save</button>
</div>
Density classes
- bb-button-bar--density-xs: Extra small spacing between buttons
- bb-button-bar--density-sm: Small spacing between buttons
- bb-button-bar--density-md: Medium spacing between buttons
- bb-button-bar--density-lg: Large spacing between buttons
- bb-button-bar--density-xl: Extra large spacing between buttons
<!-- Extra small spacing between buttons -->
<div class="bb-button-bar bb-button-bar--density-xs">
<button class="bb-button-bar__button btn btn-primary">Action 1</button>
<button class="bb-button-bar__button btn btn-secondary">Action 2</button>
</div>
<!-- Small spacing between buttons -->
<div class="bb-button-bar bb-button-bar--density-sm">
<button class="bb-button-bar__button btn btn-primary">Action 1</button>
<button class="bb-button-bar__button btn btn-secondary">Action 2</button>
<button class="bb-button-bar__button btn btn-tertiary">Action 3</button>
</div>
<!-- Large spacing between buttons -->
<div class="bb-button-bar bb-button-bar--density-lg">
<button class="bb-button-bar__button btn btn-primary">Save</button>
<button class="bb-button-bar__button btn btn-secondary">Cancel</button>
</div>
<!-- Extra large spacing between buttons -->
<div class="bb-button-bar bb-button-bar--density-xl">
<button class="bb-button-bar__button btn btn-primary">Submit</button>
<button class="bb-button-bar__button btn btn-secondary">Draft</button>
</div>
Button classes
- bb-button-bar__button: Individual button within the bar
- bb-button-bar__button--across: Button that pushes subsequent buttons to opposite side
<!-- Button across -->
<div class="bb-button-bar">
<button class="bb-button-bar__button btn btn-secondary">Cancel</button>
<button class="bb-button-bar__button--across btn btn-primary">Save</button>
</div>
Responsive behavior
- Test button text length on mobile screens
- Consider using bb-button-bar--reverse when primary action should appear first visually
- Use appropriate spacing modifiers for the context
- Ensure touch targets are large enough on mobile devices
Mobile (small screens)
- Buttons stack vertically
- Primary actions appear at the top for accessibility
- Full-width button layout
- Consistent vertical spacing
Desktop (large screens)
- Buttons arrange horizontally
- Primary actions align to the right
- Consistent horizontal spacing between buttons
- Buttons maintain their natural width
Customization variables
The button bar system uses several SCSS variables that can be customized:
Margin variables
- $button-bar-margin-y: Standard vertical margin
- $button-bar-button-sm-margin-x: Small horizontal button margin
- $button-bar-button-sm-margin-y: Small vertical button margin
- $button-bar-button-md-margin-x: Medium horizontal button margin
- $button-bar-button-md-margin-y: Medium vertical button margin
- $button-bar-left-button-sm-margin-x: Horizontal margin for leftmost small button
- $button-bar-reverse-button-margin-x: Horizontal margin for reverse ordered buttons
Background variables
- $button-bar-sticky-bg-color: Background color for sticky button bars
Actions examples
Form actions
<form>
<!-- Form fields here -->
<div class="bb-button-bar bb-button-bar--spacing-md">
<button type="submit" class="bb-button-bar__button btn btn-primary">
Submit Form
</button>
<button type="button" class="bb-button-bar__button btn btn-secondary">
Save Draft
</button>
<button type="reset" class="bb-button-bar__button btn btn-tertiary">
Reset Form
</button>
</div>
</form>
Modal actions
<div class="modal-footer">
<div class="bb-button-bar">
<button class="bb-button-bar__button btn btn-primary" data-dismiss="modal">
Confirm
</button>
<button class="bb-button-bar__button btn btn-secondary" data-dismiss="modal">
Cancel
</button>
</div>
</div>
Card actions
<div class="card">
<div class="card-header">
<h5>Card Title</h5>
</div>
<div class="card-body">
<p>Card content goes here.</p>
</div>
<div class="card-footer">
<div class="bb-button-bar bb-button-bar--center">
<button class="bb-button-bar__button btn btn-primary">
Primary Action
</button>
<button class="bb-button-bar__button btn btn-secondary">
Secondary Action
</button>
</div>
</div>
</div>
CSS examples
Basic button bar structure
.bb-button-bar {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-block-start: $button-bar-margin-y;
}
.bb-button-bar__button {
margin-block-end: $button-bar-button-md-margin-y;
}
Responsive behavior
/* Mobile: Vertical stacking */
.bb-button-bar {
flex-direction: column;
}
.bb-button-bar__button {
width: 100%;
margin-inline-end: 0;
}
/* Desktop: Horizontal layout */
@media (min-width: 576px) {
.bb-button-bar {
flex-direction: row;
justify-content: flex-end;
}
.bb-button-bar__button {
width: auto;
margin-inline-end: $button-bar-button-md-margin-x;
}
.bb-button-bar__button:last-child {
margin-inline-end: 0;
}
}
Alignment variations
/* Center alignment */
.bb-button-bar--center {
justify-content: center;
}
/* End alignment */
.bb-button-bar--end {
justify-content: end;
}
/* Reverse order */
.bb-button-bar--reverse {
flex-direction: row;
}
.bb-button-bar--reverse .bb-button-bar__button:first-child {
margin-inline-end: $button-bar-reverse-button-margin-x;
}
Density control
/* Using CSS Grid for consistent spacing */
.bb-button-bar--density-lg {
column-gap: $spacer-lg;
row-gap: $spacer-lg;
}
.bb-button-bar--density-lg .bb-button-bar__button {
margin-block: 0;
margin-inline: 0;
}
Button across
.bb-button-bar__button--across {
margin-inline-end: auto;
}
/* In reverse layout */
.bb-button-bar--reverse .bb-button-bar__button--across {
margin-inline-start: auto;
margin-inline-end: 0;
}
Stick button bar
.bb-button-bar--sticky {
background-color: $button-bar-sticky-bg-color;
border-block-start: $border-width $border-style rgba(0, 0, 0, 0.1);
}
/* Commonly used with position utilities */
.bb-button-bar--sticky.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1030;
}
Accessibility
- Include primary buttons first in HTML for proper tab order
- Use semantic button types submit, button, reset)
- Provide clear, descriptive button text
- Consider focus management in modal contexts