new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Shopify Polaris · all subjects

avatar

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Avatar purpose and use case

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Avatar sizes and recommended usage

Avatars should be one of 5 sizes: Extra small (20 x 20 px) for tightly condensed layouts; Small (24 × 24 px) when the medium size is too big or the avatar has less importance; Medium (28 × 28 px) as the default size; Large (32 × 32 px) when an avatar is a focal point such as on a single customer card; Extra large (40 × 40 px) when an avatar is a focal point such as on a single customer card.

Avatar alt text content guidelines

For avatars, use a format that describes what will show in the image: use alt="Person's name" if the avatar represents a person; use alt="Business's name" if the avatar represents a business; use alt="" if the name of the person or business appears next to the avatar as text.

Avatar accessibility structure implementation

The avatar component uses a generated scalable vector graphics (SVG) file. The <img> is hidden from assistive technologies by using an empty alt attribute, and replaced with a <span> that has role="img". This creates a standard experience for merchants using assistive technologies.

Avatar accessibility labeling with name and accessibilityLabel props

The avatar component represents content and should have a text equivalent for merchants using assistive technologies. By default, the value of the name prop is used for the alternative text. If different text would be more accurate, use the accessibilityLabel prop to replace the value provided by name.

Avatar web component name and documentation

The Avatar web component is named s-avatar and is documented at https://shopify.dev/docs/api/app-home/polaris-web-components/media/avatar.

Avatar examples available

Three examples are available: Default example (avatar-default.tsx) to present an avatar for a merchant, customer, or business; Initials example (avatar-initials.tsx) to present an avatar with initials for a merchant, customer, or business; Extra small example (avatar-extra-small.tsx) to present an avatar in a condensed layout, such as a data table cell or an action list item.

Related component for non-person objects

To show a thumbnail for an object rather than a person or business, use the thumbnail component.

Avatar size prop values renamed in v12

Avatar size prop values have been renamed: size="extraSmall" becomes size="xs", size="small" becomes size="sm", size="medium" becomes size="md", size="large" becomes size="lg", size="xl-experimental" becomes size="xl", and size="2xl-experimental" becomes size="xl".

Avatar shape prop removed in v12

The Avatar shape prop has been removed because circular shapes are no longer part of the admin design language. Remove the shape prop completely from Avatar components.

Give your agent this brain