logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
Examples
Basic
Type
Autoset Font Size
With Badge
Avatar.Group
Responsive Size
API
Avatar
Avatar.Group (4.5.0+)
Design Token

Avatar

  • UploadBadge

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Avatars can be used to represent people or objects. It supports images, Icons, or letters.

    Examples

    API

    Common props ref:Common props

    Avatar

    PropertyDescriptionTypeDefaultVersion
    altThis attribute defines the alternative text describing the imagestring-
    gapLetter type unit distance between left and right sidesnumber44.3.0
    iconCustom icon type for an icon avatarReactNode-
    shapeThe shape of avatarcircle | squarecircle
    sizeThe size of the avatarnumber | large | small | default | { xs: number, sm: number, ...}default4.7.0
    srcThe address of the image for an image avatar or image elementstring | ReactNode-ReactNode: 4.8.0
    srcSetA list of sources to use for different screen resolutionsstring-
    draggableWhether the picture is allowed to be draggedboolean | 'true' | 'false'true
    crossOriginCORS settings attributes'anonymous' | 'use-credentials' | ''-4.17.0
    onErrorHandler when img load error, return false to prevent default fallback behavior() => boolean-

    Tip: You can set icon or children as the fallback for image load error, with the priority of icon > children

    Avatar.Group (4.5.0+)

    PropertyDescriptionTypeDefaultVersion
    maxCountMax avatars to shownumber-
    maxPopoverPlacementThe placement of excess avatar Popovertop | bottomtop
    maxPopoverTriggerSet the trigger of excess avatar Popoverhover | focus | clickhover4.17.0
    maxStyleThe style of excess avatar styleCSSProperties-
    sizeThe size of the avatarnumber | large | small | default | { xs: number, sm: number, ...}default4.8.0
    shapeThe shape of the avatarcircle | squarecircle5.8.0

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    containerSizeSize of Avatarnumber32
    containerSizeLGSize of large Avatarnumber40
    containerSizeSMSize of small Avatarnumber24
    groupBorderColorBorder color of avatars in a groupstring#ffffff
    groupOverlappingOverlapping of avatars in a groupnumber-8
    groupSpaceSpacing between avatars in a groupnumber4
    textFontSizeFont size of Avatarnumber18
    textFontSizeLGFont size of large Avatarnumber24
    textFontSizeSMFont size of small Avatarnumber14

    Global TokenHow to use?

    Basic

    Three sizes and two shapes are available.

    expand codeexpand code
    Autoset Font Size

    For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use gap to set the unit distance between left and right sides.

    expand codeexpand code
    Avatar.Group

    Avatar group display.

    expand codeexpand code
    Type

    Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

    expand codeexpand code
    With Badge

    Usually used for reminders and notifications.

    expand codeexpand code
    Responsive Size

    Avatar size can be automatically adjusted based on the screen size.

    expand codeexpand code
    U
    K
    K+2
    K+2
    K+2
    AK
    U
    USER
    avatar
    U
    1