• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Statistik
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Avatar

Avatar

9.0.0

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
Props
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
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., "MM").

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.

customAttribute

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

icon

FCIcon to display in the avatar. We recommend using an icon from @sj-ab/component-library.ui.icons

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., "MM").

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.

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., "MM").

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

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

Länkar

  • Storybook

  • Figma

  • Bit.cloud

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

  • Remove lazy loading icon in Chip and Avatar components

    9.0.0

    Breaking

  • Icons

    8.3.0
  • Updated design token colors

    8.2.0
  • Update Avatar stories

    8.1.1
  • Upgrade to React 19

    8.1.0

Statistik