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'] as const).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'] as const).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 tightly grouped actions. A row where only one button can be on, such as left, center or right alignment, is a SegmentedControl: it draws this same row, fills the chosen button, and handles the choosing and the keyboard for you.

<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, LinkButton and ToggleButton are also available as Buttons.Button, Buttons.LinkButton and Buttons.ToggleButton, so a button group, a set of toggles included, 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>
  <Buttons hasAddons role="group" aria-label="Text style">
    <Buttons.ToggleButton defaultPressed>Bold</Buttons.ToggleButton>
    <Buttons.ToggleButton>Italic</Buttons.ToggleButton>
    <Buttons.ToggleButton>Underline</Buttons.ToggleButton>
  </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).
  • For a set of toggles that each turn on and off on their own, use ToggleButton in Buttons hasAddons, and give the Buttons role="group" and an aria-label. A set where only one can be on is a radio group, so use SegmentedControl for it, which draws the same has-addons row, or Radios when the choice is sent with a form.
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.
  • ToggleButton: A button that stays pressed, for a set of toggles in a group.
  • SegmentedControl: A has-addons row where only one button can be on.
  • 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.
  • Buttons.ToggleButton: The ToggleButton component renders a button that stays pressed until it's pressed again, and says whether it's on through aria-pressed. It's always a <button type="button">, so it never submits a form and carries no form value: a setting saved with a form is a Checkbox or a Switch. A set of toggles that each turn on and off on their own goes in Buttons hasAddons with role="group" and an aria-label. A set where only one can be on is a radio group rather than a row of these: use SegmentedControl, or Radios for a choice that's sent with a form.