---
navigation: false
---

## Breaking Changes

Classes to invert dark mode like `u-text-gray-900` have been removed.

- Components now have a `ui` prop to override the entire preset instead of individual props
- Components prop `popperOptions` has been renamed to `popper`
- `Alert`, `AlertDialog`, `Tabs` and `Pills` components have been removed

### `Avatar`

- `wrapperClass`, `backgroundClass`, `placeholderClass` and `roundedClass` props have been removed in favor of `ui`
- `rounded` prop is now a class defaulting to `rounded-full` instead of a boolean prop, can be overriden through `ui.avatar.rounded`
- `chip` prop is now `chipVariant`
- `ui.avatar.size` and `ui.avatar.chip.size` `xxs` and `xxxs` have been renamed respectively to `2xs` and `3xs`

### `AvatarGroup`

- `ringClass` and `marginClass` props have been removed in favor of `ui`
- `group` prop has been removed in favor of slots

### `Badge`

- `baseClass` prop has been removed in favor of `ui`
- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.badge.rounded`
- `color` prop has been added to change the color scheme of the badge
- `variant` prop is now the variant instead of the color
- `font-medium` has been moved from `ui.badge.base` to `ui.badge.font`

### `Button`

- `customClass` prop have been removed
- `baseClass`, `iconBaseClass` and `roundedClass` props have been removed in favor of `ui`
- `leadingIconClass` and `trailingIconClass` props have been removed
- `rounded` prop is now a class defaulting to `rounded-md` instead of a boolean prop, can be overriden through `ui.button.rounded`
- `color` prop has been added to change the color scheme of the badge
- `variant` prop is now the variant instead of the color
- `labelCompact` and `compact` props have been removed entirely alongside preset `ui.button.compact` and `ui.button.icon.leading.compactSpacing` and `ui.button.icon.trailing.compactSpacing`
- `padded` prop has been added to remove padding
- `ui.button.size.xxs` has been renamed to `ui.button.size.2xs`
- `ui.button.size.2xl` has been introduced
- `ui.button.gap` has been introduced to replace margins defined in `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing`
- `ui.button.icon.leading.spacing` and `ui.button.icon.trailing.spacing` that added negative margin to icons have been removed to keep consitency when surcharging a button through default slot (code has only been commented for now)
- `font-medium` has been moved from `ui.button.base` to `ui.button.font`

### `ButtonGroup`

- New component

### `Dropdown`

- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `divideClass`, `baseClass`, `transitionClass`, `groupClass`, `itemBaseClass`, `itemActiveClass`, `itemInactiveClass`, `itemDisabledClass`, `itemIconClass`, `itemAvatarClass` and `itemShortcutsClass` props have been removed in favor of `ui`
- preset has been updated to improve dark mode

### `Card`

- `baseClass`, `backgroundClass`, `borderColorClass`, `shadowClass`, `ringClass`, `roundedClass`, `bodyClass`, `bodyBackgroundClass`, `headerClass`, `headerBackgroundClass`, `footerClass`, `footerBackgroundClass` props have been removed in favor of `ui`
- `rounded` prop is now a class defaulting to `rounded-lg` instead of a boolean prop, can be overriden through `ui.avatar.rounded`
- `padded` prop has been removed, use `ui.rounded = 'sm:rounded-lg'` instead when false
- `ui.card.border` has been removed in favor of `ui.card.divide`
- `ui.card.header` & `ui.card.footer` are now `{ spacing: '', background: '' }`

### `Container`

- `constrainedClass` prop has been removed in favor of `ui`
- `ui.container.base` and `ui.container.spacing` have been added
- `padded` prop has been removed, use `ui.spacing = 'sm:px-6 lg:px-8'` instead when false
- `constrained` prop has been removed, use `ui.constrained = ''` instead when false

### `Input`

- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui`

### `FormGroup`

- Renamed to `InputGroup`
- `wrapperClass`, `containerClass`, `labelClass`, `labelWrapperClass`, `descriptionClass`, `requiredClass` and `hintClass` props have been removed in favor of `ui`

### `Textarea`

- `wrapperClass`, `baseClass` and `customClass` props have been removed in favor of `ui`
- `resize` is now false by default

### `Select`

- `wrapperClass`, `baseClass`, `iconBaseClass` and `customClass` props have been removed in favor of `ui`

### `SelectCustom`

- Renamed to `SelectMenu`
- `placeholder` prop is now `null` by default
- `nullable` prop has been removed
- `textAttribute` has been renamed to `optionAttribute` and now defaults to `label`
- `wrapperClass`, `baseClass`, `iconBaseClass`, `customClass`, `listBaseClass`, `listContainerClass`, `listWidthClass`, `listInputClass`, `listTransitionClass`, `listOptionBaseClass`, `listOptionContainerClass`, `listOptionActiveClass`, `listOptionInactiveClass`, `listOptionSelectedClass`, `listOptionUnselectedClass`, `listOptionDisabledClass`, `listOptionEmptyClass`, `listOptionIcon`, `listOptionIconBaseClass`, `listOptionIconActiveClass`, `listOptionIconInactiveClass` and `listOptionIconSizeClass` props have been removed in favor of `ui`
- `ui.selectCustom.list` has been moved to the root of `ui.selectMenu`, the component now uses `ui.select` to render the default slot

### `Radio`

- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui`

### `Checkbox`

- `wrapperClass`, `baseClass`, `labelClass`, `requiredClass`, `helpClass` and `customClass` props have been removed in favor of `ui`

### `Toggle`

- `baseClass`, `activeClass`, `inactiveClass`, `containerBaseClass`, `containerActiveClass`, `containerInactiveClass`, `iconBaseClass`, `iconActiveClass`, `iconInactiveClass`, `iconOnClass` and `iconOffClass` props have been removed in favor of `ui`

### `CommandPalette`

- `inputCloseIcon` and `emptyIcon` props have been removed in favor of `ui`
- `inputIcon` prop has been renamed to `icon`
- `inputPlaceholder` prop has been renamed to `placeholder`
- `options` prop has been renamed to `fuse` to follow the `popper` and `ui` props convention

### `Modal`

- `wrapperClass`, `innerClass`, `containerClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `shadowClass`, `ringClass`, `roundedClass`, `widthClass` and `transitionClass` props have been removed in favor of `ui`
- `innerStyle` prop has been removed
- `#header` and `#footer` slots have been removed

### `Slideover`

- `wrapperClass`, `baseClass`, `backgroundClass`, `overlayBackgroundClass`, `overlayTransitionClass`, `widthClass`, `headerClass` and `transitionClass` props have been removed in favor of `ui`
- `#header` slot has been removed

### `Popover`

- `wrapperClass`, `containerClass`, `widthClass`, `baseClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass` and `transitionClass` props have been removed in favor of `ui`

### `Tooltip`

- `wrapperClass`, `containerClass`, `baseClass`, `widthClass`, `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `shortcutsClass` and `transitionClass` props have been removed in favor of `ui`

### `ContextMenu`

- `wrapperClass`, `containerClass`, `widthClass`, `backgroundClass`, `shadowClass`, `roundedClass`, `ringClass`, `baseClass` and `transitionClass`

### `Notification`

- `backgroundClass`, `shadowClass`, `ringClass`, `roundedClass`, `transitionClass`, `customClass` and `iconBaseClass` props have been removed in favor of `ui`
- `type` prop has been removed
- `ui.notification.type` and `ui.notification.icon.color` have been removed
- `ui.notification.close.icon.name` has been moved to `ui.notification.default.closeIcon`

### `useToast`

- `addNotification` and `removeNotification` have been renamed to `add` and `remove`
- `success`, `info`, `warning` and `error` methods have been removed as `type` disappeared from `Notification`