Skip to content

Components

Avatar

A graphical representation of a user or entity - usually a photo or initials

Basic usage

First, import the component.

import {Avatar} from '@pleo-io/telescope'

Then use it like so:

API reference

The component accepts the following props.

Prop	Type	Default
`decorative`	boolean	false
`getInitials`	function
`icon`	React.ReactElement
`name`	string
`outlined`	boolean
`size`	enum	48
`skeleton`	boolean	false
`src`	string
`state`	enum	default
`visuallyHiddenText`	string

This component also accepts the following styled system props:

Prop	Type	Default
`backgroundColor`	enum
`bg`	enum
`m`	enum
`margin`	enum
`marginBottom`	enum
`marginLeft`	enum
`marginRight`	enum
`marginTop`	enum
`marginX`	enum
`marginY`	enum
`mb`	enum
`ml`	enum
`mr`	enum
`mt`	enum
`mx`	enum
`my`	enum

Badge

Prop	Type	Default
`as`	enum	div
`icon`*	React.ReactElement
`variant`	enum	neutral
`visuallyHiddenText`*	string

AvatarGroup

Prop	Type	Default
`max`	number
`size`	enum	48
`stacked`	boolean

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

On this page