The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Avatar

An image element representing a user
<Avatar alt="User Name" fallbackText="UN" src={imgUrl} />

Props
Link to this heading

<Avatar>

import { Avatar } from '@strum/react';
name
type
default
alt*
Required
string
-
fallbackText
string
-
shape
"circle" | "square" | "rounded"
circle
size
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
8
src
string
-

Fallback
Link to this heading

<Avatar alt="User Name" User fallbackText="UN" src={null} />

Sizes
Link to this heading

You can pass any size from the availble sizing tokens.

<Stack alignItems="center" direction="horizontal">

  <Avatar alt="User Name" fallbackText="UN" src={imgUrl} size="9" />

  <Avatar alt="User Name" fallbackText="UN" src={imgUrl} size="8" />

  <Avatar alt="User Name" fallbackText="UN" src={imgUrl} size="7" />

  <Avatar alt="User Name" fallbackText="UN" src={imgUrl} size="6" />

</Stack>

Shapes
Link to this heading

<Stack direction="horizontal">

  <Avatar alt="User Name" fallbackText="UN" shape="circle" src={imgUrl} />

  <Avatar alt="User Name" fallbackText="UN" shape="rounded" src={imgUrl} />

  <Avatar alt="User Name" fallbackText="UN" shape="square" src={imgUrl} />

</Stack>
Edit on GitHub