grommet
Version:
focus on the essential experience
121 lines (77 loc) • 1.52 kB
Markdown
## Avatar
An Avatar.
[](https://storybook.grommet.io/?selectedKind=Avatar&full=0&addons=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=avatar&module=%2Fsrc%2FAvatar.js)
## Usage
```javascript
import { Avatar } from 'grommet';
<Avatar/>
```
## Properties
**size**
A fixed size. Defaults to `medium`.
```
xsmall
small
medium
large
xlarge
string
```
**src**
Specifies a URL string for an avatar image.
```
string
```
## Intrinsic element
```
div
```
## Theme
**avatar.extend**
Any additional style for the Avatar. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**avatar.size.xsmall**
The xsmall size of the Avatar. Expects `string`.
Defaults to
```
18px
```
**avatar.size.small**
The small size of the Avatar. Expects `string`.
Defaults to
```
24px
```
**avatar.size.medium**
The medium size of the Avatar. Expects `string`.
Defaults to
```
48px
```
**avatar.size.large**
The large size of the Avatar. Expects `string`.
Defaults to
```
72px
```
**avatar.size.xlarge**
The xlarge size of the Avatar. Expects `string`.
Defaults to
```
96px
```
**avatar.text.extend**
Any additional style for the text. Expects `string | (props) => {}`.
Defaults to
```
undefined
```
**avatar.text.fontWeight**
The font weight of the label. Expects `number`.
Defaults to
```
undefined
```