---
title: Version 2.1.0
description:
  Explore the changelog for Chakra UI version 2.1.0. Learn about the latest
  features, bug fixes, and improvements.
releaseUrl: https://github.com/chakra-ui/chakra-ui/pull/6044
releaseDate: May 22, 2022
version: 2.1.0
---

## Minor Changes

### Styled System `2.1.0`

- Add support for responsive variants and sizes

  ```jsx live=false
  <Button variant={['sm', 'lg']}>Click me</Button>
  ```

- Add support for `!important` in token values as an escape hatch for overriding
  properties in responsive variants/sizes.

  ```jsx live=false
  <Button variant={['sm', 'lg']} fontSize='lg !important'>
    Click me
  </Button>
  ```

  **Notes**

  - Based on how this is designed, there's no support for responsive
    `colorScheme` since it is technically not a variant
  - When using responsive sizes and variants, overriding properties via props
    might not work as expected. We use native CSS media queries to enable this
    feature so there's no "magic" under the hood. If you really want to override
    properties, you can consider using the important syntax

## Patch Changes

### All components

- Ensure types used by other chakra packages are properly exported and imported
  so that `src` directory is not referenced in the emitted type declarations.

### Avatar `2.0.1`

- Add `referrerPolicy` prop

### Image `2.0.1`

- Add `referrerPolicy` prop

### Focus Lock `2.0.1`

- Upgrade dependency `react-focus-lock` to be compatible with React 18

### Media Query `3.0.1`

- Fix regression in use-media-query hook in SSR envrionments where it throws
  hydration mismatch

### Textarea `2.0.1`

- Fix ESLint warnings and errors

### Theme `2.0.2`

- Tag component variants borderRadius was overwriting baseStyle eventhough
  borderRadius was same for all variants. borderRadius is now part of the
  baseStyle

### Toast `2.0.3`

- Fix regression with the default toast position. It now defaults to `bottom` as
  described in docs