Avatar

8.0.20

The Avatar component assists users in understanding content, without being the focal point in a UI. They can represent a user or a brand.

Demo

NamnTypBeskrivning

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

icon

string | ComponentClass | FunctionComponentIcon to display in the avatar. Can be a string representing the icon name or a React component of type SVG.

id

stringUnique identifier for the component.

initials

stringInitials to display in the avatar. Must be exactly two characters, representing the first and last name, without any spaces (e.g., "JD").

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

passengerCategory

"ADULT" | "CHILD_AND_YOUTH" | "STUDENT" | "SENIOR"Specifies the background color of the avatar based on the category of the passenger.

size

"sm" | "xs" | "md" | "lg" | "xl"Size of the avatar.

Installation

npm install @sj-ab/component-library.ui.avatar

Länkar

Tillgänglighet

Avatar ska enbart användas som komplement till annat innehåll. Bilden och textinitialerna är därför dolda för skärmläsare med aria-hidden.

Change log

Statistik

  • Importer av Avatar

    17
  • Repos med Avatar

    40%
  • Senaste installerade version av Avatar

    8.0.20
  • Äldsta installerade version av Avatar

    8.0.13