Bulma Buttons (Group)

The Buttons component in Bulma is a container for grouping multiple button elements together. It provides consistent spacing, alignment, and responsive behavior for button groups.

Basic Button Group

Use .buttons container to group buttons:

<div class="buttons">
  <button class="button">One</button>
  <button class="button">Two</button>
  <button class="button">Three</button>
</div>

Button Group Alignment

Centered Button Group

<div class="buttons is-centered">
  <button class="button">Centered</button>
  <button class="button">Buttons</button>
</div>

Right Aligned Button Group

<div class="buttons is-right">
  <button class="button">Right</button>
  <button class="button">Aligned</button>
</div>

Justified Button Group

<div class="buttons is-justified">
  <button class="button">Justified</button>
  <button class="button">Button Group</button>
</div>

Button Group Addons

Create attached button groups with .has-addons:

Basic Addons

<div class="buttons has-addons">
  <button class="button">Left</button>
  <button class="button">Center</button>
  <button class="button">Right</button>
</div>

Addons with Selected State

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button is-info is-selected">Maybe</button>
  <button class="button">No</button>
</div>

Addons with Different Colors

<div class="buttons has-addons">
  <button class="button is-primary">Primary</button>
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
</div>

Button Group Sizes

<!-- Small button group -->
<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Buttons</button>
</div>

<!-- Normal button group (default) -->
<div class="buttons are-normal">
  <button class="button">Normal</button>
  <button class="button">Buttons</button>
</div>

<!-- Medium button group -->
<div class="buttons are-medium">
  <button class="button">Medium</button>
  <button class="button">Buttons</button>
</div>

<!-- Large button group -->
<div class="buttons are-large">
  <button class="button">Large</button>
  <button class="button">Buttons</button>
</div>

Responsive Button Groups

<!-- Stack vertically on mobile -->
<div class="buttons is-responsive">
  <button class="button">Responsive</button>
  <button class="button">Button</button>
  <button class="button">Group</button>
</div>

<!-- Different alignments on different screens -->
<div class="buttons is-centered-mobile is-right-tablet">
  <button class="button">Align</button>
  <button class="button">Responsively</button>
</div>

<!-- Wrap buttons on smaller screens -->
<div class="buttons is-flex-wrap-wrap">
  <button class="button">Wrap</button>
  <button class="button">These</button>
  <button class="button">Buttons</button>
  <button class="button">On</button>
  <button class="button">Small</button>
  <button class="button">Screens</button>
</div>

Mixed Button Styles in Group

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-success is-outlined">Success Outlined</button>
  <button class="button is-danger is-rounded">Danger Rounded</button>
  <button class="button is-warning is-inverted">Warning Inverted</button>
</div>

Button Group with Icons

<div class="buttons">
  <button class="button">
    <span class="icon">
      <i class="fas fa-bold"></i>
    </span>
    <span>Bold</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-italic"></i>
    </span>
    <span>Italic</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-underline"></i>
    </span>
    <span>Underline</span>
  </button>
</div>

Button Group with Addons and Icons

<div class="buttons has-addons">
  <button class="button">
    <span class="icon">
      <i class="fas fa-align-left"></i>
    </span>
    <span>Left</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-align-center"></i>
    </span>
    <span>Center</span>
  </button>
  <button class="button is-selected">
    <span class="icon">
      <i class="fas fa-align-right"></i>
    </span>
    <span>Right</span>
  </button>
</div>

Use Cases

1. Pagination Controls

<div class="buttons has-addons is-centered">
  <button class="button">
    <span class="icon">
      <i class="fas fa-chevron-left"></i>
    </span>
    <span>Previous</span>
  </button>
  <button class="button">1</button>
  <button class="button is-info is-selected">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">
    <span>Next</span>
    <span class="icon">
      <i class="fas fa-chevron-right"></i>
    </span>
  </button>
</div>

2. Filter Controls

<div class="buttons">
  <span class="button is-static">Filter by:</span>
  <button class="button is-primary is-selected">All</button>
  <button class="button">Published</button>
  <button class="button">Draft</button>
  <button class="button">Archived</button>
</div>

3. Sort Controls

<div class="buttons has-addons">
  <span class="button is-static">Sort:</span>
  <button class="button">
    <span class="icon">
      <i class="fas fa-sort-amount-down"></i>
    </span>
    <span>Date</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-sort-alpha-down"></i>
    </span>
    <span>Name</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-sort-numeric-down"></i>
    </span>
    <span>Price</span>
  </button>
</div>

4. Text Editor Controls

<div class="buttons">
  <button class="button">
    <span class="icon">
      <i class="fas fa-bold"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-italic"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-underline"></i>
    </span>
  </button>
  <div class="buttons has-addons">
    <button class="button">
      <span class="icon">
        <i class="fas fa-align-left"></i>
      </span>
    </button>
    <button class="button">
      <span class="icon">
        <i class="fas fa-align-center"></i>
      </span>
    </button>
    <button class="button">
      <span class="icon">
        <i class="fas fa-align-right"></i>
      </span>
    </button>
  </div>
  <button class="button">
    <span class="icon">
      <i class="fas fa-list-ul"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-list-ol"></i>
    </span>
  </button>
</div>

5. View Toggle Controls

<div class="buttons has-addons">
  <button class="button is-selected">
    <span class="icon">
      <i class="fas fa-th-large"></i>
    </span>
    <span class="is-hidden-mobile">Grid</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-list"></i>
    </span>
    <span class="is-hidden-mobile">List</span>
  </button>
</div>

Nested Button Groups

<div class="buttons">
  <div class="buttons has-addons">
    <button class="button">File</button>
    <button class="button">Edit</button>
    <button class="button">View</button>
  </div>
  <div class="buttons has-addons">
    <button class="button is-primary">Save</button>
    <button class="button is-light">Cancel</button>
  </div>
</div>

Button Group with Dropdown

<div class="buttons">
  <button class="button is-primary">Main Action</button>
  <div class="button is-primary is-dropdown">
    <span>More Options</span>
    <span class="icon is-small">
      <i class="fas fa-angle-down"></i>
    </span>
  </div>
</div>

Customization

/* Custom button group spacing */
.buttons.are-tight .button {
  margin-bottom: 0.25rem;
  margin-right: 0.25rem;
}

.buttons.are-loose .button {
  margin-bottom: 1rem;
  margin-right: 1rem;
}

/* Vertical button group */
.buttons.is-vertical {
  flex-direction: column;
  align-items: flex-start;
}

.buttons.is-vertical .button {
  margin-bottom: 0.5rem;
  margin-right: 0;
  width: 100%;
}

/* Button group with border */
.buttons.has-border {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Custom addon styles */
.buttons.has-addons.is-rounded .button:first-child {
  border-top-left-radius: 290486px;
  border-bottom-left-radius: 290486px;
}

.buttons.has-addons.is-rounded .button:last-child {
  border-top-right-radius: 290486px;
  border-bottom-right-radius: 290486px;
}

Accessibility

<!-- Button group with proper ARIA labels -->
<div class="buttons" role="group" aria-label="Formatting options">
  <button class="button" aria-label="Bold text">B</button>
  <button class="button" aria-label="Italic text">I</button>
  <button class="button" aria-label="Underline text">U</button>
</div>

<!-- Button group with keyboard navigation -->
<div class="buttons" role="toolbar" aria-label="Text formatting">
  <button class="button" tabindex="0">Bold</button>
  <button class="button" tabindex="0">Italic</button>
  <button class="button" tabindex="0">Underline</button>
</div>

Best Practices

Group related buttons together logically
Use consistent spacing within button groups
Consider mobile responsiveness when grouping many buttons
Use .has-addons for toggle-like button groups
Provide visual feedback for selected states
Limit the number of buttons in a group for clarity
Use appropriate alignment based on context
Test button groups on various screen sizes

Note: The Buttons component is particularly useful for creating toolbars, pagination controls, filter options, and any interface that requires multiple related actions grouped together.

Up next: Bulma Card Component

Bulma CSS Tutorial