A component for displaying the user avatar.
If there is no image, it shows the initials from `title` on the gradient background.

```jsx
const { Button } = require('../Button');
initialState = {
  image: null,
  withTitle: true,
  square: false,
};

const status = ['away', 'unset', 'invisible', 'do_not_disturb'];

const handleImageChange = () => {
  setState({
    image: `https://picsum.photos/500/500/?${Math.floor(Math.random() * 20)}`,
  });
};

const handleImageRemove = () => {
  setState({ image: null });
};

const handleStatusChange = () => {
  setState({ status: status[Math.floor(Math.random() * status.length)] });
};

<div>
  <Button
    size="small"
    onClick={() => setState({ withTitle: !state.withTitle })}
  >
    Toggle title
  </Button>{' '}
  <Button onClick={handleStatusChange} size="small">
    Randomize status
  </Button>{' '}
  <Button size="small" onClick={() => setState({ square: !state.square })}>
    Toggle square
  </Button>{' '}
  <Button onClick={handleImageChange} intent="primary" size="small">
    Change image
  </Button>{' '}
  <Button
    onClick={handleImageRemove}
    intent="danger"
    size="small"
    disabled={!state.image}
  >
    Remove image
  </Button>
  <hr />
  <Avatar
    placeholder="empty"
    size={150}
    square={state.square}
    image={state.image}
    title={state.withTitle ? 'Valera Kotovski' : null}
    onClick={console.log}
    status={state.status}
  />
</div>;
```