Skip to main content
react-md - Avatar - Demos

Simple Usage

Avatars are a great way to represent people or specific objects within your app. They can render as:

  • an image
  • text content
  • icon

When you supply a src prop, the avatar will be be rendered with an <img> tag and some additional styles applied. For accessibility, you should also supply the alt prop. The image will also be updated to have role="presentation" since screen readers normally don't need to be notified for these sort of things and can become a nuisance when there is a giant list of avatars.


Color Examples

The Avatar component has a few pre-made colors available by default. You can change the color by supplying the color prop.

This example also shows how you can use one of the special exports from each package to get the some variable names from SCSS in js using the scssVariables from the dist folder.

If you are using Typescript, the scssVariables file will be fully typed as well! So you won't have to worry about guessing what variable is what and it'll error if you try to use an invalid value.

  • JJasmine Robinson
  • DDevonte Craig
  • DDean Reid
  • SShaquille Bauer
  • VVivian Bishop
  • BBraden Mullins
  • KKatlyn Mcdonald
  • IIsabella Marshall
  • LLee Christensen
  • TTommy Hogan
  • TTimothy Harvey
  • PPreston Phillips
  • MMarco Sherman
  • HHaley Coleman
  • MMario Swanson
  • XXavier Solis
  • KKeaton Cannon
  • CCassandra Austin
  • IIrene Holland
  • GGustavo Love
  • MMeghan Stewart
  • RRenee Townsend
  • BBobby Newman
  • KKeaton Ortiz
  • DDustin Wells
  • JJerry Mcgee
  • CCarl Howard
  • SSabrina Lang
  • RReed Baker
  • KKristen Fields
  • GGavin Carrillo
  • CClaudia Neal
  • LLeonard Schneider
  • DDominick Boyd
  • MMary Hampton
  • MMark Ayala
  • KKristina Warner
  • AAntonio Walton
  • TTyson Scott
  • HHarley Moss