# AvatarGroup
**Also known as:** Facepile, PersonaGroup, AvatarStack
## Description
BitAvatarGroup draws the avatars of a group of people - the members of a team, the people on a document - as a row of overlapping BitPersona coins, with a +N coin standing in for the ones past MaxDisplayed.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitAvatarGroupClassStyles?` | null | Custom CSS classes for the different parts of the avatar group. |
| Items | `IEnumerable<BitAvatarGroupItem>` | [] | The people of the group, in the order their avatars are drawn. |
| MaxDisplayed | `int?` | null | The number of avatars drawn before the rest are counted by the overflow coin ("+N") instead. By default every item is drawn. |
| OnItemClick | `EventCallback<BitAvatarGroupItem>` | | The callback for when an avatar is clicked, which makes every avatar a button. |
| OnOverflowClick | `EventCallback<IReadOnlyList<BitAvatarGroupItem>>` | | The callback for when the overflow coin is clicked, given the items it stands in for. It makes the overflow coin a button. |
| OverflowAriaLabelFormat | `string?` | null | The name of the overflow coin to the screen readers, as a composite format string: {0} is the number of the people it hides and {1} their names. Default: "{0} more: {1}". |
| Size | `BitPersonaSize` | BitPersonaSize.Size32 | The size of the avatars, from Size24 to Size120. Size8, which has no coin, is drawn as Size24. |
| Spread | `bool` | false | Lays the avatars out side by side with a gap between them, instead of overlapping each other. |
| Styles | `BitAvatarGroupClassStyles?` | null | Custom CSS styles for the different parts of the avatar group. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitAvatarGroupItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | The custom CSS classes of the avatar of the item. |
| CoinColor | `BitColor?` | null | The color of the coin of the item, which takes the place of the one picked for it from its name. |
| Data | `object?` | null | Any data the app wants to keep with the item. |
| Href | `string?` | null | The URL the avatar of the item links to, which makes it a link. |
| ImageUrl | `string?` | null | The URL of the picture of the item. Without one, or while it loads, the coin shows the initials of the Text. |
| Initials | `string?` | null | The initials the coin shows in place of the ones derived from the Text. |
| IsDisabled | `bool` | false | Whether the avatar of the item is disabled, which is never clickable nor a link. |
| Key | `string?` | null | A unique value to use as the key of the item. |
| Presence | `BitPersonaPresence` | BitPersonaPresence.None | The presence status of the item, drawn as a dot on the corner of its coin. |
| Style | `string?` | null | The custom CSS styles of the avatar of the item. |
| Target | `string?` | null | The target of the link of the item (_blank, _self, ...), for an item with an Href. |
| Text | `string?` | null | The name of the item, which names its avatar to the screen readers and gives its coin its initials. |
| Title | `string?` | null | The tooltip of the avatar of the item. Default: the Text. |
### BitAvatarGroupClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAvatarGroup. |
| Item | `string?` | null | Custom CSS classes/styles for each avatar of the BitAvatarGroup. |
| Overflow | `string?` | null | Custom CSS classes/styles for the overflow coin of the BitAvatarGroup, the one that counts the hidden avatars. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-AvatarGroup-overlap` | 0.2 | Share of a coin each avatar covers of the one before it. |
| `--bit-AvatarGroup-gap` | spacing(0.5) | Room between the avatars of a Spread group. |
| `--bit-AvatarGroup-ring-color` | var(--bit-clr-bg-pri) | Ring that cuts overlapping coins apart, the color of the surface the group sits on. |
| `--bit-AvatarGroup-ring-width` | 2px | Width of that ring. |
| `--bit-AvatarGroup-overflow-background` | var(--bit-clr-bg-ter) | Fill of the overflow coin. |
| `--bit-AvatarGroup-overflow-color` | var(--bit-clr-fg-pri) | Count on the overflow coin. |
| `--bit-AvatarGroup-overflow-border-color` | var(--bit-clr-brd-sec) | Edge of the overflow coin, which keeps it a coin on any surface. |
## Examples
\n**Basic**:
```razor
people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Overflow**:
```razor
people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Presence**:
```razor
presentPeople =
[
new() { Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png", Presence = BitPersonaPresence.Online },
new() { Text = "Aaron Reid", Presence = BitPersonaPresence.Away },
new() { Text = "Alex Lundberg", Presence = BitPersonaPresence.Busy },
new() { Text = "Roko Kolar", Presence = BitPersonaPresence.Offline },
];
```
\n**Spread**:
```razor
people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Click**:
```razor
hidden)
{
hiddenPeople = string.Join(", ", hidden.Select(p => p.Text));
}
private static readonly List people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Links**:
```razor
linkedPeople =
[
new() { Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png", Href = "/components/persona" },
new() { Text = "Aaron Reid", Href = "/components/persona" },
new() { Text = "Alex Lundberg", Href = "/components/persona", Target = "_blank" },
];
```
\n**Disabled**:
```razor
partlyDisabledPeople =
[
new() { Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Text = "Aaron Reid", IsDisabled = true },
new() { Text = "Alex Lundberg" },
];
private static readonly List people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Color**:
```razor
coloredPeople =
[
new() { Text = "Aaron Reid", CoinColor = BitColor.Primary },
new() { Text = "Alex Lundberg", CoinColor = BitColor.Success },
new() { Text = "Roko Kolar", CoinColor = BitColor.Warning },
new() { Text = "Christian Bergqvist", CoinColor = BitColor.Error },
new() { Text = "Valentina Lovric" },
];
```
\n**Size**:
```razor
people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**Style & Class**:
```razor
people =
[
new() { Key = "annie", Text = "Annie Lindqvist", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Key = "aaron", Text = "Aaron Reid" },
new() { Key = "alex", Text = "Alex Lundberg" },
new() { Key = "roko", Text = "Roko Kolar" },
new() { Key = "christian", Text = "Christian Bergqvist" },
new() { Key = "valentina", Text = "Valentina Lovric" },
new() { Key = "maor", Text = "Maor Sharett" },
];
```
\n**RTL**:
```razor
rtlPeople =
[
new() { Text = "سارا نوری", ImageUrl = "/_content/Bit.BlazorUI.Demo.Client.Core/images/persona/persona-female.png" },
new() { Text = "مریم احمدی" },
new() { Text = "علی رضایی" },
new() { Text = "زهرا کریمی" },
new() { Text = "حسین محمدی" },
];
```
Clicked: @clickedPerson
Hidden: @hiddenPeople
```
```csharp
private string? clickedPerson;
private string? hiddenPeople;
private void HandleOverflowClick(IReadOnlyList