---
order: 0
title: 头像
zh-CN: 头像
en-US: Avatar
---

## zh-CN

### 单个头像

+ 需展示成员头像及成员名称
+ 鼠标 hover 可移除成员
+ 点击成员头像之后的操作，根据业务需要定制

## en-US

### Single Avatar

+ Need to show the member's picture and name
+ Mouse hover to show deleting icon
+ The operation after clicking the member's Avatar can be customized by business requirements

````jsx
import Avatar from '../src/index.jsx';

const { useState } = React;
const onClick = () => {
  console.log('clicked');
};

const Demo = (props) => {
  const [visible, onVisibleChange] = useState(true);
  const onClose = () => { onVisibleChange(false); };
  return (
    visible ?
      <Avatar
        img="https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200"
        text="成员名称"
        closable={false}
        onClick={onClick}
        onClose={onClose}
      /> : null
  );
}

ReactDOM.render(<Demo/>, mountNode);
````