office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
21 lines (11 loc) • 1.22 kB
Markdown
The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person. Many times this component is used when sharing who has access to a specific view or file or when assigning a user to a task within a workflow.
## Adding people
The component can include an add button which can be used for quickly adding a person to the list.
## Empty state
The empty state of the Facepile should include only an add button. Another variant is to use an input field with placeholder text instructing the user to add a person. See the PeoplePicker component for the menu used to add people to the Facepile list.
## One person
When there is only one person in the Facepile, consider using their name next to the face or initials.
## Expanding the list when there is no overflow
When there is a need to show the Facepile expanded into a vertical list, include a downward chevron button. Clicking or tapping on the chevron would open a standard list view of personas.
## Overflow
When the Facepile exceeds a max number of 5 people, show a button at the end of the list indicating how many are not being shown. Clicking or tapping on the overflow would open a standard list view of personas.