---
description: "Actions Required for v.2.0.0"
sidebar_custom_props:
  iconName: "component-solid"
---

# v2.0.0

Version 2.0.0 of Medusa UI introduces a set of new components, and breaking changes to some of the existing components.

## How to Update

Run the following command in your project:

```bash npm2yarn
npm install @medusajs/ui@2.0.0
```

---

## Breaking Changes

### `Button` Component

The [Button](https://docs.medusajs.com/ui/components/button) component has been split into two components: `Button` and `IconButton`.

The `Button` no longer supports the `format` property that was previously used to specify if a button should be styled as a icon button.

Instead, use the `IconButton` component for this purpose.

### `Badge` Component

The [Badge](https://docs.medusajs.com/ui/components/badge) component has been split into two components: `Badge` and `IconBadge`.

The `Badge` component no longer supports the `format` property that was previously used to specify if a badge should be styled as a tag. Also, the border-radius of the `Badge` component is now controlled by the `rounded` property.

Instead, use the `IconBadge` component for this purpose.

### `CodeBlock` Component

The [CodeBlock](https://docs.medusajs.com/ui/components/code-block) component no longer accepts the `hideLineNumbers` property. Instead, the property should be passed directly to the `snippets` property.

This change was made to make the component more flexible, allowing users to specify whether to show line numbers for each snippet individually.

---

## New Components

### `IconBadge` Component

The [IconBadge](https://docs.medusajs.com/ui/components/icon-badge) component is a new component that can be used to render a badge with an icon. It is a replacement for the `Badge` component with the `format` property set to `icon`.

### `StatusBadge` Component

The [StatusBadge](https://docs.medusajs.com/ui/components/status-badge) component is a new component that can be used to render a badge with a status.

### `IconButton` Component

The [IconButton](https://docs.medusajs.com/ui/components/icon-button) component is a new component that can be used to render a button with an icon. It is a replacement for the `Button` component with the `format` property set to `icon`.

### `Tabs` Component

The [Tabs](https://docs.medusajs.com/ui/components/tabs) component allows you to render a set of tab panels, which are displayed one at a time.

### `ProgressTabs` Component

The [ProgressTabs](https://docs.medusajs.com/ui/components/progress-tabs) component is a new component that can be used to render a set of tab panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.

### `CurrencyInput` Component

The [CurrencyInput](https://docs.medusajs.com/ui/components/currency-input) component is a new component that can be used to render a currency input field. It is specifically designed to be used for implementing currency inputs, such as money amounts.

### `CommandBar` Component

The [CommandBar](https://docs.medusajs.com/ui/components/command-bar) component is a new component that can be used to render a list of keyboard commands or shortcuts.

### `ProgressAccordion` Component

The [ProgressAccordion](https://docs.medusajs.com/ui/components/progress-accordion) component is a new component that can be used to render a list of accordion panels with a progress indicator. It is specifically designed to be used for implementing multi-step tasks.

The `ProgressAccordion` component requires animations that have been introduced in the latest version of `@medusajs/ui-preset`, so make sure to update this package as well:

```bash npm2yarn
npm install @medusajs/ui-preset@1.0.1
```

---

## Other Changes

### Cleanup of `z-index`'s across all components

The `z-index`'s of all components have been cleaned up to ensure that components are layered correctly, out of the box. Components now have a maximum `z-index` of `1`, with the exception of the `Toaster` component.

This prevents issues such as the `Select.Content` component being layered behind the `FocusModal` component.

While this is meant to make it easier to use the components, be aware that if your application uses custom `z-index`'s, you may need to update them, or override the `z-index` of the components from Medusa UI.

### `Table.Pagination` Component

The [Table.Pagination](https://docs.medusajs.com/ui/components/table) component now displays the correct number of pages (`0`) when `count` is `0`.

### `Calendar` Component

The [Calendar](https://docs.medusajs.com/ui/components/calendar) component's day buttons are now of type `button`, which prevents them from submitting the form when clicked.
