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>

Group Size​

Set the size prop ('small', 'medium', 'large') on Buttons to size every button in the group at once, instead of setting size on each Button individually.

<>
  <Buttons size="small">
    <Button color="primary">Small</Button>
    <Button color="info">Small</Button>
  </Buttons>
  <Buttons size="medium">
    <Button color="primary">Medium</Button>
    <Button color="info">Medium</Button>
  </Buttons>
  <Buttons size="large">
    <Button color="primary">Large</Button>
    <Button color="info">Large</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>

To join a button to a Dropdown, use Field hasAddons instead, as the split button does.

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).
size'small' | 'medium' | 'large'—Size of the button group.
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.