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';

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Text color helper for the button group.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for the button group.
bgColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | '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> and Bulma helper props(See Helper Props)

Usage​

Default Button Group​

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

All Colors 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​

<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)​

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

Centered Group​

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

Right-Aligned Group​

<Buttons isRight>
  <Button color="success">Accept</Button>
  <Button color="danger">Reject</Button>
</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​