Designsystemet.Avatar

A person or organisation shown as initials, a picture or an icon in a circle.

Mirrors Avatar from @digdir/designsystemet-react.

Avatar.view { name = Avatar.Label "Kari Nordmann", content = Avatar.Initials "KN" } []


Avatar.view
    { name = Avatar.Tooltip "Ola Nordmann"
    , content = Avatar.Image "/profiles/ola.jpg"
    }
    [ Avatar.size Avatar.Small ]

The config has two parts:

Name, what screen readers announce: a label, a label that also shows as a tooltip, or nothing when the name is already next to it.
Content, what it shows: initials, a picture, an icon, or the default person silhouette.

React → Elm

<Avatar aria-label="Kari">KN</Avatar> → Avatar.view { name = Label "Kari", content = Initials "KN" } []
<Avatar data-tooltip="Kari">… → { name = Tooltip "Kari", … }
<Avatar aria-hidden>… → { name = Decorative, … }
<Avatar …><img src="…" alt="" /></Avatar> → { content = Image "…", … }
<Avatar …><Icon /></Avatar> → { content = Icon icon, … }
<Avatar … /> (no children) → { content = Placeholder, … }
data-size="xs" → Avatar.size Avatar.ExtraSmall
asChild + <a> → Avatar.viewAs Html.a { … } [ Attr.href "…" ]

React's deprecated initials, data-initials and variant props are not ported. For a square avatar, set the CSS variable: Attr.attribute "style" "--dsc-avatar-radius: var(--ds-border-radius-md)". (Attr.style can't set custom properties, the names starting with --.)

Managed by designsystemet-web

With a Tooltip name, @digdir/designsystemet-web shows the tooltip popover and keeps the accessible name in sync with data-tooltip. On view (role="img") that is the aria-label this module already renders, so nothing changes. On viewAs with Initials the element has its own text, so the web layer moves the name from aria-label to aria-description: the link or button is announced by its initials, with the name as description. Use a Label name if the name must be the accessible name.

view :

{ name : Name

, content : Content msg

}

-> List (Attribute msg)

-> Html msg

A <span class="ds-avatar" role="img">.

viewAs :

(List (Attribute msg) -> List (Html msg) -> Html msg)

-> { name : Name

, content : Content msg

}

-> List (Attribute msg)

-> Html msg

An avatar rendered as another element than <span> (React's asChild), typically a profile link or a menu button. The element keeps its own role, so there is no role="img".

Avatar.viewAs Html.a
    { name = Avatar.Label "Min profil", content = Avatar.Initials "KN" }
    [ Attr.href "/profil" ]

Name and content

type Name

= Label String

| Tooltip String

| Decorative

Who the avatar is, for assistive technology.

Label name: the avatar's aria-label.
Tooltip name: the aria-label, also shown as a tooltip on hover and focus. Adds tabindex="0" so keyboard users can reach the tooltip.
Decorative: aria-hidden="true", for when the name is written next to the avatar.

type Content msg

= Initials String

| Image String

| Icon (Html msg)

| Placeholder

What the avatar shows.

Initials "KN": one to three letters, upper-cased by the CSS.
Image src: <img src="…" alt="" />. The alt is empty because the Name already names the avatar.
Icon icon: for example a building for an organisation.
Placeholder: the default person silhouette from the CSS.

Sizes

type Size

= ExtraSmall

| Small

| Medium

| Large

Designsystemet.Size plus ExtraSmall.

size : Size -> Attribute msg

Set the avatar's data-size.

ensolabs/designsystemet-elm/1.0.0

Designsystemet.Avatar

React → Elm

Managed by designsystemet-web

Name and content

Sizes

Modules

Basics

Actions

Forms

Navigation

Overlays

Feedback

Content