Skip to main content

Button

Overview​

The Button component provides a flexible and highly customizable button for your Bulma React UI. It supports all Bulma color, size, and state modifiers, as well as additional helper classes for text color, spacing, and more. It can render as either a <button> or an <a> element, and is designed to be fully accessible and composable.

tip

Make sure to provide meaningful text or accessible content for screen readers.

Import​

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

Props​

PropTypeDefaultDescription
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Bulma color modifier for the button.
size'small' | 'normal' | 'medium' | 'large'—Button size.
isLightbooleanfalseUse the light version of the color.
isRoundedbooleanfalseButton is fully rounded.
isLoadingbooleanfalseShows a loading spinner.
isStaticbooleanfalseNon-interactive static button.
isFullWidthbooleanfalseButton fills the width of its parent.
isOutlinedbooleanfalseOutlined button style.
isInvertedbooleanfalseInverted color style.
isFocusedbooleanfalseStyled as focused.
isActivebooleanfalseStyled as active.
isHoveredbooleanfalseStyled as hovered.
isDisabledbooleanfalseDisabled state. (also applies aria-disabled and disables pointer events)
as'button' | 'a''button'Render as a <button> or <a> element.
hrefstring—If as="a", the href for the anchor link.
onClickfunction—Click event handler.
targetstring—Target for anchor element.
relstring—Rel for anchor element.
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 (e.g., 'danger' for has-text-danger).
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 (e.g., 'info' for has-background-info).
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Button content.
...All standard <button> and Bulma helper props(See Helper Props)

Usage​

Default Button​

<Button>Default Button</Button>

All Colors​

import { Buttons } from './Buttons';

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

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

Light Variant​

<Button color="primary" isLight>
  Light Primary Button
</Button>

Rounded​

<Button color="info" isRounded>
  Rounded Button
</Button>

Loading​

<Button color="success" isLoading>
  Loading Button
</Button>

Static​

<Button isStatic>Static Button</Button>

Full Width​

<Button color="warning" isFullWidth>
  Full Width Button
</Button>

Outlined​

<Button color="danger" isOutlined>
  Outlined Button
</Button>

Inverted​

<Button color="link" isInverted>
  Inverted Button
</Button>

Focused​

<Button color="primary" isFocused>
  Focused Button
</Button>

Active​

<Button color="info" isActive>
  Active Button
</Button>

Hovered​

<Button color="success" isHovered>
  Hovered Button
</Button>

Disabled​

<Button color="warning" isDisabled disabled>
  Disabled Button
</Button>

Custom Text and Background Color​

<Button textColor="danger" bgColor="info">
  Custom Text &amp; Background
</Button>

Spacing Helpers​

<Button m="2" p="3" mx="4" my="5" mt="1" mr="2" mb="3" ml="4">
  Button with Spacing
</Button>

Text Alignment​

<Button textAlign="centered">Centered Text Button</Button>

Responsive Viewport​

<Button viewport="mobile">Mobile Responsive Button</Button>

Flexbox Layout​

<Button display="flex" justifyContent="center" alignItems="center">
  Flex Button
</Button>

Button Group​

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

With HTML Attributes​

<Button type="submit" className="custom-class">
  Submit Button
</Button>

Accessibility​

  • Labeling: Always provide descriptive content for buttons for screen readers.
  • States: The isDisabled and disabled props ensure correct aria-disabled and disabled attributes.
  • Keyboard: When rendered as <a>, disabled buttons are not focusable.
  • Focus: Use isFocused and isActive for visual feedback, but rely on browser focus for actual accessibility.
note

If your button has only an icon, use aria-label to provide accessible text.

  • Buttons: Group multiple buttons together, including add-ons and alignment.
  • Icon: Inline icons for use inside buttons.
  • Helper Props: List of all supported Bulma helper props for spacing, colors, etc.

Additional Resources​

Pro Tip

You can use all Bulma helper props with <Button /> for powerful utility-based styling.