Avatar (Demo)

This is just a demo to show that we can import packages with TSX and CSS Modules (opens in a new tab) directly 🎉

ABDCFM

import { Avatar } from '@republik/ui-docs-demo'
 
export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 20, margin: 50 }}>
      <Avatar
        src='https://fillmurray.lucidinternets.com/200/200'
        alt='Fill Murray'
      />
      <Avatar src='https://placebear.com/200/200' alt='Placebear' />
      <Avatar fallback='AB' />
      <Avatar fallback='DC' color='lightblue' />
      <Avatar fallback='FM' color='hotpink' />
    </div>
  )
}

☝️ To render a component directly from a file and also show the code of that file directly below, use the ComponentDemo component, like so:

<ComponentDemo file='demos/avatar.tsx' />

Avatar Props

Name	Type	Default	Description
`src?`	`string`	–	Image source
`alt?`	`string`	`'Alternative teggscht'`	Alternative text for the photo
`fallback?`	`string`	–	Fallback string to be shown when the image fails to load
`color?`	`string`	–	The color of the Avatar
`flavor?`	`'strawberry' \| 'banana' \| 'chocolate'`	–	This is a named union
`kind?`	`'a' \| 'b' \| 'c'`	–	This is an inline union

Overview Icons