# Button > The `Button` component provides a flexible and highly customizable button for your Bulma React UI. # 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, spacing, and more. :::caution Accessibility Use `Button` for real button actions (submit, toggle, open a dialog). For a link-styled click target or client-side navigation, prefer [`LinkButton`](./linkbutton.md) — using `Button` as a fake link/`
` loses proper anchor and a11y semantics. ::: :::tip Make sure to provide meaningful text or accessible content for screen readers. ::: --- ## Import ```tsx import { Button } from '@allxsmith/bestax-bulma'; ``` --- ## Usage ### Default Button This is the most fundamental use of the `Button` component, providing a simple yet stylish Bulma button for general actions. Use the default configuration (no extra props required) for forms, dialogs, toolbars, or anywhere you need a straightforward clickable action with Bulma’s default styling. ```tsx live ``` ### All Colors By setting the `color` prop, you can style your button with any of Bulma's button colors. The semantic colors are `primary`, `link`, `info`, `success`, `warning`, and `danger`. Neutral colors are `white`, `light`, `dark`, and `black`. Special colors are `text` (minimal text-only button) and `ghost` (link-like button). This allows you to visually communicate the purpose of different actions—for example, use `success` for confirming, `danger` for destructive actions, or `ghost` for a button that looks like a link. ```tsx live import { Buttons } from './Buttons'; {['primary', 'link', 'info', 'success', 'warning', 'danger'].map(color => ( ))} ; ``` ### All Sizes The `size` prop lets you adjust the button’s scale for various contexts. Supported values for `size` are `small`, `normal`, `medium`, and `large`. Use `small` for compact UIs, `large` for important calls to action, and `normal` or `medium` for general use. ```tsx live {['small', 'normal', 'medium', 'large'].map(size => ( ))} ``` ### Light Variant Create a softer, pastel version of your button by adding the `isLight` prop. When combined with a `color`, such as `primary`, this produces a much lighter shade. This is useful for secondary actions or when you want your button to coordinate with your theme color without drawing too much attention. ```tsx live ``` ### Rounded Enable the `isRounded` prop to give your button fully rounded edges. This style can help actions look friendlier and more approachable, and is often used in toolbars, cards, or to make special actions stand out visually. ```tsx live ``` ### Loading Set the `isLoading` prop to display a loading spinner inside the button. This is commonly used while waiting for an asynchronous operation, such as form submission or data fetching, providing user feedback and preventing multiple submissions. The button's content is replaced by the spinner while `isLoading` is active. ```tsx live ``` ### Static When you need a button that looks interactive but isn’t clickable, use the `isStatic` prop. This makes the button non-interactive while retaining its visual appearance, which is useful for read-only forms, visual placeholders, or situations where you want to display a button-style element without enabling user actions. ```tsx live ``` ### Full Width With the `isFullWidth` prop, your button will expand to completely fill the width of its parent container. This is useful for mobile layouts, modal footers, or anywhere you want your call-to-action to be easy to find and tap. ```tsx live ``` ### Outlined Use the `isOutlined` prop to give your button a simple outlined style instead of a solid fill. This works in conjunction with the `color` prop and is ideal for secondary actions. The possible values for `color` here are the same as above: `primary`, `link`, `info`, `success`, `warning`, or `danger`. ```tsx live ``` ### Inverted The `isInverted` prop inverts the button’s color, making it suitable for placement on colored backgrounds. When paired with a `color` (such as `link`), it ensures the button maintains contrast and legibility regardless of the surrounding layout. ```tsx live ``` ### Focused Show a focused state by enabling the `isFocused` prop. This can help demonstrate keyboard navigation and accessibility features, as it visually marks which button is currently focused in the UI. ```tsx live ``` ### Active The `isActive` prop highlights the button as currently pressed or selected. This is useful in toggle groups, tab bars, or any situation where you need to indicate the active choice to your users. ```tsx live ``` ### Hovered By setting the `isHovered` prop, you can force the button to display its hover style. This can be useful for UI previews, tutorials, or custom scenarios where you want to visually indicate what happens on mouseover, without requiring actual pointer interaction. ```tsx live ``` ### Ghost Use `color="ghost"` to render a button that looks like a link but behaves as a ` ``` ### Text Use `color="text"` to render a minimal text-only button with no background or border. This is ideal for subtle actions in toolbars or inline contexts where a standard button would be too prominent. ```tsx live ``` ### Disabled To make a button both visually and functionally inactive, use the `isDisabled` prop and add the native `disabled` attribute. This prevents all user interaction and applies appropriate styling and accessibility attributes, clearly communicating that the action is unavailable. ```tsx live ``` ### Custom Text and Background Color With the `textColor` and `bgColor` props, you can independently set the button’s foreground and background colors. Accepted values for both are any Bulma color, such as `primary`, `info`, `danger`, etc. This approach lets you create unique, branded, or visually striking button styles beyond the defaults. ```tsx live ``` ### Spacing Helpers Add margin and padding to your button using Bulma’s spacing helper props: `m`, `p`, `mx`, `my`, `mt`, `mr`, `mb`, and `ml`. These accept numeric values (e.g., `2`, `4`), letting you fine-tune the space around your button directly from props, without custom CSS. ```tsx live ``` ### Text Alignment Control the horizontal alignment of the button’s text using the `textAlign` prop. Possible values are `centered`, `justified`, `left`, and `right`. This is especially useful for full-width or toolbar buttons where text alignment matters for readability and style. ```tsx live ``` ### Responsive Viewport The `viewport` prop allows you to apply responsive styles for specific breakpoints. Accepted values include `mobile`, `tablet`, `desktop`, `widescreen`, and `fullhd`. This makes it easy to tailor your button’s appearance for different devices and screen sizes. ```tsx live ``` ### Flexbox Layout Bulma’s flexbox helpers, like `display="flex"`, `justifyContent`, and `alignItems`, can be applied as props. For `justifyContent`, use `center`, `start`, `end`, `space-between`, `space-around`, or `space-evenly`; for `alignItems`, use `center`, `start`, `end`, `baseline`, or `stretch`. This lets you precisely control the layout of button content, such as centering icons and text. ```tsx live ``` ### Button Group Group multiple buttons together using the `` component. The `hasAddons` prop ensures the buttons are visually connected, making it perfect for toolbars, segmented controls, or navigation layouts where related actions need to be grouped as a unit. ```tsx live ``` ### With HTML Attributes You can pass any standard HTML attributes to the Button component, such as `type` (possible values: `button`, `submit`, or `reset`) and `className`. This ensures compatibility with forms, accessibility tooling, and integration with other React libraries. ```tsx live ``` ### Polymorphic `as` (Router Links) The `as` prop accepts any `React.ElementType`, not just `'button'` or `'a'`. This lets `Button` render as a router's `Link` component (React Router, Next.js, TanStack Router, etc.) while keeping Bulma's button styling and real anchor semantics — `href`, middle-click, right-click "copy link", and correct accessibility all keep working, unlike a `useNavigate()`-in-`onClick` wrapper. ```tsx import { Link as RouterLink } from 'react-router-dom'; import { Button } from '@allxsmith/bestax-bulma'; ; ``` When `as` is anything other than `'button'` (including `'a'` or a custom component), `Button` strips button-only HTML attributes (`type`, `disabled`, `form`, etc.) before spreading the remaining props onto the rendered element, so they don't leak onto a link-like component. --- ## 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 ``, 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. ::: --- ## Related Components - [`Buttons`](./buttons.md): Group multiple buttons together, including add-ons and alignment. - [`Icon`](../elements/icon.md): Inline icons for use inside buttons. - [Helper Props](../helpers/usebulmaclasses.md): List of all supported Bulma helper props for spacing, colors, etc. --- ## Additional Resources - [Bulma Button Documentation](https://bulma.io/documentation/elements/button/) - [React Button Accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/button/) - [Storybook: Button Stories](https://bestax.io/storybook/?path=/story/elements-button--default) :::tip Pro Tip You can use all [Bulma helper props](../helpers/usebulmaclasses.md) with `