Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
An avatar is a graphical representation of a user and typically appears in list and card views, along side a user's information and/or content that they have created
import { Avatar, AvatarGroup } from "@sharegate/orbit-ui";Since ShareGate's applications are closely tied to Microsoft Office 365, our avatar aims to be similar to O365 personas.
By default, an avatar display the initials of a user.
An avatar can accept a local image.
An avatar can accept a remote image url. If the remote image loading is delayed or fail to load, the user initials will be displayed.
An avatar component can vary in size.
In some cases, you might want to stack avatars as a group.
An avatar group have a maximum of 4 slots. Once this threshold is exceeded, the remaining avatars count is indicated as the fourth slot.
import { Avatar } from "@sharegate/orbit-ui";| Name | Description | Default |
|---|---|---|
| name* | The name of the person in the avatar. string | - |
| retryCount | The allowed number of retry to load a remote image. number | - |
| size | An avatar can vary in size. "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl" | ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl"> | - |
| slot | Slot to render into. string | - |
| src | The url of a remote image or an image object. string | - |
import { AvatarGroup } from "@sharegate/orbit-ui";| Name | Description | Default |
|---|---|---|
| align | The alignment of the elements. "center" | "end" | "start" | ResponsiveValue<FlexAlignment> | - |
| fluid | Whether the elements take up the width & height of their container. false | true | ResponsiveValue<boolean> | - |
| inline | Whether or not the element generate line breaks before or after himself. falsetrue | - |
| reverse | Whether or not to reverse the order of the elements. falsetrue | - |
| size | The avatars of the group can vary in size. "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl" | ResponsiveValue<"xs" | "sm" | "md" | "lg" | "xl" | "2xs" | "2xl"> | - |
| wrap | Whether elements are forced onto one line or can wrap onto multiple rows. false | true | ResponsiveValue<boolean> | true |