--- order: 3 title: zh-CN: 带徽标的头像 en-US: With Badge --- ## zh-CN 通常用于消息提示。 ## en-US Usually used for reminders and notifications. ```tsx import { Avatar, Badge } from 'antd'; import { UserOutlined } from '@ant-design/icons'; ReactDOM.render( <> } /> } /> , mountNode, ); ``` ```css /* tile uploaded pictures */ .avatar-item { margin-right: 24px; } [class*='-col-rtl'] .avatar-item { margin-right: 0; margin-left: 24px; } ```