AvatarProps

Set the url of the image displayed as Avatar

string

altText

size

AvatarSize

isRounded

boolean

Set whether to display a Kinsta icon at the bottom right side of the Avatar

isKinstaStaff

isLoading

RefAttributes

Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom

Ref<HTMLDivElement>

Attributes


# Avatar

import { Demo } from '@kinsta/stratus-website'

<Demo storybookPath="components-avatar--kinsta-staff" />

## Usage

```tsx
import { Avatar } from '@kinsta/stratus'

const MyComponent = () => (
  <>
    <Avatar size="l" isRounded isKinstaStaff src="https://vignette.wikia.nocookie.net/shaniverse/images/7/71/Boba.jpg/revision/latest/scale-to-width-down/2000?cb=20200812025700" />
  </>
)
```

## Props

The <code>Avatar</code> components interface extends the
[<code>HTMLDivElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement "MDN article about the interface")
interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (<code>on*</code>),
and props related to styling (<code>className</code>, <code>style</code>).

<Props />
## Types

- <code>AvatarProps</code>: props of the <code>Avatar</code> component processed by stratus
- <code>AvatarInterface</code>: <code>AvatarProps</code> extended by <code>{`HTMLAttributes<HTMLDivElement>`}</code>

Read more about [types](/docs/user-guide/getting-started/types "Types") here

***

## See also
- [Icon](/docs/user-guide/components/icons-and-images/icons "Icons")
- [Tag](/docs/user-guide/components/icons-and-images/tag "Tag")


Avatar

#Usage

#Props

#Types

#See also