Components

Avatar

A person as a picture, or as initials or an icon when there is none. Give it a Name and it works out the initials, the picture's alternative text and a colour of its own.

Drawn and behaving as Flux UI's avatar does, measured against its live docs.

Avatar

A picture, named by Name.

AvatarExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarExample : Component
{
    protected override Component? Render() =>
        Ui.Avatar.Src("/img/avatars/amber.svg").Name("Mara Lind");
}

Live result

Tooltip

Names it on hover and keyboard focus.

AvatarTooltipExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarTooltipExample : Component
{
    protected override Component? Render() =>
        Ui.Avatar.Tooltip("Mara Lind").Src("/img/avatars/amber.svg").Name("Mara Lind");
}

Live result

Initials

Two words give two first letters, one word its first two; InitialsSingle() keeps one, and Initials states them.

AvatarInitialsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarInitialsExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Avatar.Key("two").Name("Mara Lind"),
            Ui.Avatar.Key("word").Name("maralind"),
            Ui.Avatar.Key("single").Name("maralind").InitialsSingle(),
            Ui.Avatar.Key("stated").Initials("ML")
        ];
}

Live result

Sizes

Five sizes; 40px when it says none.

AvatarSizesExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarSizesExample : Component
{
    private const string Mara = "/img/avatars/amber.svg";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-end gap-6")[
            Ui.Avatar.Key("xl").Xl.Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("lg").Lg.Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("md").Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("sm").Sm.Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("xs").Xs.Src(Mara).Name("Mara Lind")
        ];
}

Live result

Icon

An icon in place of initials.

AvatarIconExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarIconExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Avatar.Key("user").Icon(Ui.IconName.User),
            Ui.Avatar.Key("phone").Icon(Ui.IconName.Phone),
            Ui.Avatar.Key("desktop").Icon(Ui.IconName.ComputerDesktop)
        ];
}

Live result

Colors

Any of Flux's seventeen hues behind the initials.

AvatarColorsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarColorsExample : Component
{
    // Flux's seventeen hues, in its order.
    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            Enum.GetValues<Ui.Color>().Take(17).Select(Component (color) =>
                Ui.Avatar.Key(color.ToString()).Name("Mara Lind").Color(color))
        ];
}

Live result

Auto color

ColorAuto() picks a hue from the initials, or from ColorSeed, so one person is one colour.

AvatarAutoColorExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarAutoColorExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap gap-2")[
            Ui.Avatar.Key("cp").Name("Mara Lind").ColorAuto(),
            Ui.Avatar.Key("mj").Name("Mia Jones").ColorAuto(),
            Ui.Avatar.Key("kc").Name("Kai Chen").ColorAuto(),
            Ui.Avatar.Key("seed").Name("Mara Lind").ColorAuto().ColorSeed("user-42")
        ];
}

Live result

Circle

AvatarCircleExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarCircleExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Avatar.Key("image").Circle().Src("/img/avatars/amber.svg").Name("Mara Lind"),
            Ui.Avatar.Key("initials").Circle().Name("Mara Lind")
        ];
}

Live result

Badge

A mark on a corner: a plain dot, a count, an emoji or anything else.

AvatarBadgeExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarBadgeExample : Component
{
    private const string Mara = "/img/avatars/amber.svg";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Avatar.Key("dot").Badge("").BadgeColor(Ui.Color.Green).Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("outline").Badge("").BadgeColor(Ui.Color.Zinc).BadgePosition(Ui.AvatarBadgePosition.TopRight)
                .BadgeCircle().BadgeVariant(Ui.AvatarBadgeVariant.Outline).Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("count").Badge("25").Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("emoji").Circle().Badge("👍").BadgeCircle().Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("slot").Circle()
                .Badge(Img.Src("/img/avatars/sky.svg").Alt("").Class("size-3"))
                .Src(Mara).Name("Mara Lind")
        ];
}

Live result

Groups

Stacked, each ringed in the colour of the page behind it.

AvatarGroupsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarGroupsExample : Component
{
    private const string Mara = "/img/avatars/amber.svg";

    private const string Theo = "/img/avatars/sky.svg";

    private const string Nia = "/img/avatars/emerald.svg";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.AvatarGroup.Key("group")[
                Ui.Avatar.Key("mara").Src(Mara).Name("Mara Lind"),
                Ui.Avatar.Key("theo").Src(Theo).Name("Theo Brandt"),
                Ui.Avatar.Key("nia").Src(Nia).Name("Nia Okafor"),
                Ui.Avatar.Key("more")["3+"]
            ],
            // On another ground, each avatar's ring takes that ground's colour.
            Div.Key("ground").Class("rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800")[
                Ui.AvatarGroup.Class("*:ring-zinc-100 dark:*:ring-zinc-800")[
                    Ui.Avatar.Key("ground-mara").Circle().Lg.Src(Mara).Name("Mara Lind"),
                    Ui.Avatar.Key("ground-theo").Circle().Lg.Src(Theo).Name("Theo Brandt"),
                    Ui.Avatar.Key("ground-nia").Circle().Lg.Src(Nia).Name("Nia Okafor"),
                    Ui.Avatar.Key("ground-more").Circle().Lg["3+"]
                ]
            ]
        ];
}

Live result

As a button or a link

AvatarAsButtonExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class AvatarAsButtonExample : Component
{
    private const string Mara = "/img/avatars/amber.svg";

    protected override Component? Render() =>
        Div.Class("flex flex-wrap items-center gap-6")[
            Ui.Avatar.Key("button").As(Ui.AvatarAs.Button).Src(Mara).Name("Mara Lind"),
            Ui.Avatar.Key("link").Href("#").Src(Mara).Name("Mara Lind")
        ];
}

Live result

Behaviour

Without a picture

Src is optional. Given a Name, it shows the first letter of the first and last words ("Mara Lind" is ML), the first two letters of a single word ("maralind" is Ma), or one letter with InitialsSingle(). Initials states them, Icon draws an icon instead, and children replace all of it: Ui.Avatar["3+"].

Href makes it a link and As(Ui.AvatarAs.Button) a button; Tooltip names it on hover and keyboard focus.

One person, one colour

Color fills it with one of Ui.Color's hues. ColorAuto() picks one from the initials, or from ColorSeed: the CRC-32 of them over Flux's seventeen hues, so the same person is the same colour here as on a Flux page.

Groups

Ui.AvatarGroup stacks its avatars, each over the one before and ringed in the page's colour. On another ground, give the ring that ground's colour: Class("*:ring-zinc-100").

Reference

`Ui.Avatar`

flux:avatar

A person as a picture, or as initials or an icon when there is none. Children replace all of it: "3+".

Step	Takes	What it does
`.Name(…)`	`string`	Whose it is: the source of the initials, the picture's alternative text and the tooltip's words.
`.Src(…)`	`string`	The picture's address. Initials or an icon when unset.
`.Initials(…)`	`string`	The initials to show, rather than those worked out from Name.
`.InitialsSingle()`	`bool`	One letter rather than two.
`.Alt(…)`	`string`	The picture's alternative text. Name when unset.
`.Size(…)`	`Ui.AvatarSize` Md Xs Sm Lg Xl Each is a step of its own too, unless an HTML tag has its name.	How large it is. 40px when unset.
`.Color(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	The fill behind initials or an icon. Zinc when unset.
`.ColorAuto()`	`bool`	Picks the fill from the initials, so one person is one colour everywhere: Flux's color="auto".
`.ColorSeed(…)`	`string`	What ColorAuto picks from instead of the initials: an id that never changes.
`.Circle()`	`bool`	A circle rather than a rounded square.
`.Icon(…)`	`Ui.IconName` — one of 317 names	An icon in place of initials.
`.IconVariant(…)`	`Ui.IconVariant` Outline Solid Mini Micro Each is a step of its own too, unless an HTML tag has its name.	Which drawing of the icon. Solid when unset.
`.Tooltip(…)`	`string`	Words shown on hover and keyboard focus.
`.TooltipPosition(…)`	`Ui.TooltipPosition` Top Right Bottom Left Each is a step of its own too, unless an HTML tag has its name.	Which side the tooltip opens on. Above when unset.
`.Badge(…)`	a string, or a component	A mark on one corner: a count, an emoji, any content. "" is the plain dot.
`.BadgeColor(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	The badge's colour. The page's own ground when unset.
`.BadgeCircle()`	`bool`	A round badge rather than a slightly rounded one.
`.BadgePosition(…)`	`Ui.AvatarBadgePosition` BottomRight TopLeft TopRight BottomLeft Each is a step of its own too, unless an HTML tag has its name.	Which corner the badge sits on. Bottom right when unset.
`.BadgeVariant(…)`	`Ui.AvatarBadgeVariant` Solid Outline Each is a step of its own too, unless an HTML tag has its name.	How the badge is drawn.
`.As(…)`	`Ui.AvatarAs` Div Button Each is a step of its own too, unless an HTML tag has its name.	The element it is written as, when it is not a link: a button to press.
`.Href(…)`	a route, or a URL string	Where it goes, which makes it a link. A generated route stays in the app.

`Ui.AvatarGroup`

flux:avatar.group

Stacks avatars, each over the one before and ringed in the page's colour; Class gives another ring.

No steps of its own: what goes inside it is its content.