React Bootstrap Button Component
Buttons with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use CoreUI’s React Button component with Bootstrap styling to build interactive, accessible, and responsive buttons for forms, tables, modals, and more.
How to use React Bootstrap Button component#
CoreUI provides a set of prebuilt React Button components styled with Bootstrap. Buttons signal actions to users and can initiate events both in the UI and behind the scenes.
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Disable text wrapping#
To prevent text wrapping inside a button, apply the .text-nowrap class to the <CButton>. Alternatively, set $btn-white-space: nowrap in Sass to apply it globally.
Button components#
The <CButton> component can render as a <button>, <a>, or <input> element. When using it as an anchor for functionality (like toggles), add role="button" for accessibility.
Outline buttons#
Use variant="outline" to create buttons with a transparent background and colored border — a more subtle alternative to standard buttons.
Ghost buttons#
For minimal buttons with no background or border, use variant="ghost". These are great for secondary actions.
Some button styles use light text colors and should be placed on dark backgrounds to maintain contrast.
Sizes#
Create large or small buttons with the size="lg" or size="sm" props.
You can also use CSS variables for fully custom sizes.
Shapes#
Pill buttons#
Use pill-shaped buttons for a soft, rounded appearance.
Square buttons#
Use square-shaped buttons for compact, uniform interactions.
Disabled state#
Disable any <CButton> by passing the disabled prop. This applies pointer-events: none and dims the button.
Disabling anchor elements (<a>) requires additional steps: CoreUI applies the .disabled class, adds aria-disabled="true", and sets tabindex="-1".
These steps prevent users from interacting with disabled links via keyboard or mouse.
Block buttons#
To make buttons span the full width of their container, use Bootstrap's layout utilities like .d-grid, .w-100, and .col-*.
Responsive layout: vertically stacked until the md breakpoint, where .d-md-block reverts to inline.
You can also create column-based buttons using .col-6 and center them with .mx-auto.
Use flex utilities and margin helpers to align buttons horizontally when they're no longer stacked.
API reference#
See the full API reference for all available props in the Bootstrap-styled React Button component.