Avatar

Documentation for the <Avatar /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn

yarn add @exponentialeducation/betomic

Basic Example#

An Avatar can be used to represent people or objects.

{/* ... */}

import { Avatar } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Avatar>
        <img
          src="https://picturepan2.github.io/spectre/img/avatar-1.png"
          alt="Imaginary Friend"/>
      </Avatar>

      {/* ... */}
    </main>
  )
}

Sizes#

Five sizes are available.

{/* ... */}

import { Avatar } from '@exponentialeducation/betomic';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <Avatar size="xs">
        <img
          src="https://picturepan2.github.io/spectre/img/avatar-1.png"
          alt="Imaginary Friend"/>
      </Avatar>

      {/* ... */}
    </main>
  )
}

Props#