User profile

Usage

Some applications have a user profile that contains user-related information and actions. The user profile is either a full-screen detail page, or a small indicator inserted in navigation components.

Avatar

The default design of avatar buttons is a circle containing a picture of the user. For users without pictures, the default image is a solid circle containing only the first letter of the username. The avatar can be pressed but has no states.

Measurements

Avatar button

The avatar button has the same dimensions, regardless of the density used.

Image sizes

You can choose from two different image sizes, depending on which fits best in your environment. More sizes might be made available future versions.

Placement

Top app bar

Users access their profile directly from the top app bar. Place the avatar to the very right of the top app bar.

Nav rail

Users can also access their profile through the navigation rail. Place the avatar at the very bottom of the nav rail.

Navigation drawer

When users select their profile in an expandable navigation drawer, the user profile expands to show the context menu.

Behavior

Default behavior

A dropdown context menu appears when users select their avatar.

Optional behavior

When users select the Profile option in the context menu, they navigate to a detailed profile page. This behavior is secondary to the default behavior and depends on whether your app has a detailed profile page.

Profile context menu

The profile menu includes the following elements:

Required

• Avatar (user photo or initial)
• Username
• Additional user information (email, state, department...)

Optional (Place any optional element outside of the profile menu as needed)

• Link to detailed profile page
• Link to user preferences
• Link to notifications
• Link to settings
• Link to related pages
• Access to help
• Sign-out button

Accessibility

• The avatar can be hovered over and clicked, but won’t display state changes to the component.
• The avatar default background color token will be atmosphere.static.gray and the text will use atmosphere.static.white to ensure AA contrast in both light and dark modes. If these tokens change, this contrast must be guaranteed.
• The dropdown, if used, will follow menu accesibility guidelines.

Cursor

Users can activate an avatar by clicking anywhere inside the button's container. The cursor will change to the hand cursor when :pressed.

Keyboard

Users should be able to navigate to and activate a profile avatar with these keys: