# React Bootstrap Button Component
> 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.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonExample = () => {
return (
<>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
)
}
```
> ## Disable text wrapping
>
> To prevent text wrapping inside a button, apply the `.text-nowrap` class to the ``. Alternatively, set `$btn-white-space: nowrap` in Sass to apply it globally.
>
> ## Button components
>
> The `` component can render as a ``, ``, or `` element. When using it as an anchor for functionality (like toggles), add `role="button"` for accessibility.
>
> ```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonComponentsExample = () => {
return (
<>
Link
Button
)
}
```
>
> ## Outline buttons
>
> Use `variant="outline"` to create buttons with a transparent background and colored border — a more subtle alternative to standard buttons.
>
> ```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonOutlineExample = () => {
return (
<>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
)
}
```
>
> ## Ghost buttons
>
> For minimal buttons with no background or border, use `variant="ghost"`. These are great for secondary actions.
>
> ```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonGhostExample = () => {
return (
<>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
)
}
```
>
>
> 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.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonSizesExample = () => {
return (
<>
Large button
Large button
)
}
```
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonSizes2Example = () => {
return (
<>
Small button
Small button
)
}
```
You can also use CSS variables for fully custom sizes.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonSizes3Example = () => {
const customVars = {
'--cui-btn-padding-y': '.25rem',
'--cui-btn-padding-x': '.5rem',
'--cui-btn-font-size': '.75rem',
} as React.CSSProperties
return (
Custom button
)
}
```
## Shapes
### Pill buttons
Use pill-shaped buttons for a soft, rounded appearance.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonShapePillExample = () => {
return (
<>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
)
}
```
### Square buttons
Use square-shaped buttons for compact, uniform interactions.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonShapeSquareExample = () => {
return (
<>
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
)
}
```
## Disabled state
Disable any `` by passing the `disabled` prop. This applies `pointer-events: none` and dims the button.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonDisabledExample = () => {
return (
<>
Primary button
Button
Primary button
Button
)
}
```
Disabling anchor elements (``) requires additional steps: CoreUI applies the `.disabled` class, adds `aria-disabled="true"`, and sets `tabindex="-1"`.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonDisabled2Example = () => {
return (
<>
Primary link
Link
)
}
```
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-*`.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonBlockExample = () => {
return (
Button
Button
)
}
```
Responsive layout: vertically stacked until the `md` breakpoint, where `.d-md-block` reverts to inline.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonBlock2Example = () => {
return (
Button Button
)
}
```
You can also create column-based buttons using `.col-6` and center them with `.mx-auto`.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonBlock3Example = () => {
return (
Button
Button
)
}
```
Use flex utilities and margin helpers to align buttons horizontally when they're no longer stacked.
```html
import React from 'react'
import { CButton } from '@coreui/react'
export const ButtonBlock4Example = () => {
return (
Button
Button
)
}
```
## API reference
See the full API reference for all available props in the Bootstrap-styled React Button component.
- [<CButton />](../api/#cbutton)