# Migration to v5

> Track and review changes to the CoreUI for React.js components to help you migrate from v4 to v5.

CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 4 to 5 migration guide](https://coreui.io/bootstrap/docs/migration/v5/).

## Components

### CAlertHeading

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CAvatar

- Removed `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CBadge

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CButton

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The button doesn't have a default color anymore, you have to add `color="primary"`

### CCard

- Removed `textColor` values: `muted`, `high-emphasis`, `medium-emphasis`, `disabled`, `high-emphasis-inverse`, `medium-emphasis-inverse`, `disabled-inverse`.
- New `textColor` values: `primary-emphasis`, `secondary-emphasis`, `success-emphasis`, `danger-emphasis`, `warning-emphasis`, `info-emphasis`, `light-emphasis`, `body`, `body-emphasis`, `body-secondary`, `body-tertiary`, `black`, `black-50`, `white`, `white-50`.

### CCardHeading

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardImage

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardSubtitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCardTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CCloseButton

- Deprecated property `white`, use `dark` instead of.

### CDatePicker

- Removed property `format`, use `inputDateFormat` instead of.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDatePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />
  ```

- `onDateChange` event return only the date object, instead of the date object and formatted string.

### CDateRangePicker

- Removed property `format`, use `inputDateFormat` instead of.

  ```jsx
  // Previous markup
  

  // New markup
  import { format } from 'date-fns'
  //...
  <CDateRangePicker inputDateFormat={(date) => format(new Date(date), 'MMMM-dd-yyyy')} />
  ```

- `onStartDateChange` and `onEndDateChange` events return only the date object, instead of the date object and formatted string.

### CDropdown

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownHeader

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownItemPlain

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownMenu

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CDropdownToggle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CFormFeedback

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CFormText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CHeaderNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CInputGroupText

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroup

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CListGroupItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CModalTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CMultiSelect

- Removed key `text` in the options list, use `label` instead

### CNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- <span className="badge bg-danger">Breaking</span> The `underline` variant has been changed to `underline-border`

### CNavbar

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarBrand

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavbarNav

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavLink

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CNavTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### COffcanvasTitle

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPaginationItem

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CPlaceholder

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CSidebar

- <span className="badge bg-danger">Breaking</span> Sidebar has a light color scheme by default, use `colorScheme="dark"` to make it dark.

### CSpinner

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.

### CToastClose

- <span className="badge bg-danger">Breaking</span> Renamed `component` property to `as`.
- Deprecated property `white`, use `dark` instead of.