Skip to main content

Buttons

Overview​

The Buttons component lets you group multiple Button elements together with Bulma's spacing, alignment, and add-on features.

It's ideal for toolbars, button clusters, or any UI where you want a consistent group of buttons, including add-on styling, centering, or right alignment.

tip

Use the Buttons component to maintain Bulma's consistent button group layout and spacing in your UI.

Import​

import { Buttons } from '@allxsmith/bestax-bulma';

Usage​

Default Button Group​

The default usage of the Buttons component groups multiple Button elements together with consistent spacing. Use this for toolbars, button clusters, or any UI where you want a visually unified group of buttons.

<Buttons>
  <Button color="primary">Save</Button>
  <Button color="info">Edit</Button>
  <Button color="danger">Delete</Button>
</Buttons>

All Colors Group​

This example shows a group of buttons, each with a different color prop (primary, link, info, success, warning, danger). Use this to visually distinguish actions or statuses within a button group.

<Buttons>
  {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => (
    <Button key={color} color={color}>
      {color.charAt(0).toUpperCase() + color.slice(1)}
    </Button>
  ))}
</Buttons>

All Sizes Group​

Demonstrates a group of buttons with different size props (small, normal, medium, large). Use this to show how button groups adapt to various sizing needs.

<Buttons>
  {['small', 'normal', 'medium', 'large'].map(size => (
    <Button key={size} size={size}>
      {size.charAt(0).toUpperCase() + size.slice(1)}
    </Button>
  ))}
</Buttons>

Add-ons (No Spacing Between Buttons)​

The hasAddons prop removes spacing between buttons, making them appear as a single connected group. This is useful for segmented controls or tightly grouped actions.

<Buttons hasAddons>
  <Button color="primary">Left</Button>
  <Button color="primary">Center</Button>
  <Button color="primary">Right</Button>
</Buttons>

Centered Group​

The isCentered prop centers the button group within its container. Use this for balanced layouts or when you want the group to stand out.

<Buttons isCentered>
  <Button color="info">One</Button>
  <Button color="info">Two</Button>
</Buttons>

Right-Aligned Group​

The isRight prop aligns the button group to the right edge of its container. This is useful for actions that should be visually separated from other content.

<Buttons isRight>
  <Button color="success">Accept</Button>
  <Button color="danger">Reject</Button>
</Buttons>

Compound (dot-notation) usage​

Button and LinkButton are also available as Buttons.Button and Buttons.LinkButton, so a button group can be composed from the single Buttons import.

<Buttons>
  <Buttons.Button color="primary">Save</Buttons.Button>
  <Buttons.Button>Cancel</Buttons.Button>
  <Buttons.LinkButton>Learn more</Buttons.LinkButton>
</Buttons>

Accessibility​

  • Grouping buttons in a <div class="buttons"> has no negative impact on accessibility.
  • Ensure each Button has a clear label (text or aria-label).
  • If grouping radio or toggle buttons, consider aria-pressed or aria-checked for stateful controls.
tip

You can use all Bulma helper props (spacing, color, alignment) with Buttons for even more control.

  • Button: The underlying button component used in the group.
  • Helper Props: All supported Bulma helper props for layout, color, and spacing.

Additional Resources​

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color helper for the button group.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Text color alias: renders has-text-<color>, exactly like textColor. Not a filled variant (no .buttons.is-<color> CSS exists; color the individual Buttons instead). Prefer textColor, which takes precedence when both are set; use bgColor for a colored surface.
bgColorBulma color | 'inherit' | 'current'—Background color helper for the button group.
isCenteredbooleanfalseCenter the group of buttons.
isRightbooleanfalseAlign the group of buttons to the right.
hasAddonsbooleanfalseGroup buttons together as addons (removes spacing between them).
childrenReact.ReactNode—The button elements to render inside the group.
...All standard <div> attributes and Bulma helper props—See Helper Props

Subcomponents:

  • Buttons.Button: The Button component provides a flexible and highly customizable button for your Bulma React UI.
  • Buttons.LinkButton: The LinkButton component renders a <button> that visually looks like text or a link.