React Button Component API
Button API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Button component and discover how to effectively utilize its props for customization.
CButton#
import { CButton } from '@coreui/react'// orimport CButton from '@coreui/react/src/components/button/CButton'| Property | Default | Type |
|---|---|---|
| active# | - | boolean |
Toggle the active state for the component. | ||
| as# | button | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'button'), (ElementType & 'cite'), (ElementType & 'data'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the base component. | ||
| color# | - | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
| disabled# | - | boolean |
Toggle the disabled state for the component. | ||
| href# | - | string |
The href attribute specifies the URL of the page the link goes to. | ||
| role# | - | string |
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | ||
| shape# | - | 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3', string |
Select the shape of the component. | ||
| size# | - | 'sm', 'lg' |
Size the component small or large. | ||
| type# | button | 'button', 'submit', 'reset' |
Specifies the type of button. Always specify the type attribute for the | ||
| variant# | - | 'outline', 'ghost' |
Set the button variant to an outlined button or a ghost button. | ||