@instructure/ui-avatar

ui-avatar

An image or letters that represents a user.

Components

The ui-avatar package contains the following:

• Avatar

Installation

npm install @instructure/ui-avatar

Usage

---
type: code
---
import React from 'react'
import { Avatar } from '@instructure/ui-avatar'

const MyAvatar = () => {
  return (
    <Avatar
      name="Kyle Montgomery"
      src={avatarSquare}
      shape="rectangle"
      margin="0 small 0 0"
    />
  )
}

Changelog

10.25.0 (2025-09-09)

Bug Fixes

• ui-a11y-utils: fix focus region skipping items after Drilldown/scrollbars (959b340)
• ui-avatar: avatar now renders images correctly when using SSR (7d8cc62)
• ui-buttons: fix seondary ai iconbutton when shape is circle (5098202)
• ui-dialog,ui-a11y-utils: fix focus getting stuck in some cases if something is removed from the middle of the focus stack (eb3f47e)
• ui-form-field: should not change layout when only screenreader-only message is present (09977a2)
• ui-heading: ai heading won't show up on print (af10476)
• ui-modal: fix Modal.body throwing error when 'as' is set to a React component (350a05c)
• ui-modal: fix tabbable modal edge case (e66ad32)
• ui-scripts: fix getGlyphData to ignore system-generated files in the icons folder (9097301)
• ui-tabs,shared-types: color tabs.panel focus outline from the theme and make it overridable by brand overrides (b4f9893)
• ui-view,ui-buttons: clarify typing of elementRefs (f8bdf91)

Features

• ui-flex: add order prop to Flex.Item (c563623)
• ui-flex: add order prop to Flex.Item (0eaa872)
• ui-icons: add new icons Instructure-3-dot and Instructure-1-dot (4258567)
• ui-icons: add new icons user-assign and restore (b617fe3)
• ui-icons: add new redo and undo icons and modify the documentation page (fd4f7b9)
• ui-icons: add new sidebar-open and sidebar-close icons (154b534)
• ui-icons: rename icons (5dc7995)
• ui-menu: remove fade in/out transitions from menu items (d3845fb)
• ui-pagination: add onMouseEnter to Pagination (327fe69)
• ui-side-nav-bar: remove experimental warning from SideNavBar documentation page (c0cc00d)