React Button Component API
Button API
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. | ||