import React from 'react' import { Avatar } from '../../' const AvatarDefault = (props) => { return ( <div> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="xxs" status="online" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="xs" status="online" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="sm" status="online" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="md" status="away" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="lg" status="offline" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Standing" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="xl" status="offline" {...props} /> </div> ) } export default AvatarDefault
This is used when there is no avatar for a particular user.
import React from 'react' import { Avatar } from '../../' const AvatarDefault = (props) => { return ( <div> <Avatar name="Terry Johnson" size="xxs" {...props} /> <Avatar name="Terry Johnson" size="xs" {...props} /> <Avatar name="Terry Johnson" size="sm" {...props} /> <Avatar name="Terry Johnson" size="md" {...props} /> <Avatar name="Terry Johnson" size="lg" {...props} /> <Avatar name="Terry Johnson" size="xl" {...props} /> </div> ) } export default AvatarDefault
A monagram is used as a fallback when an invalid or missing image url is provided.
import React from 'react' import { Avatar } from '../../' const AvatarNoImage = (props) => { return ( <div> <Avatar imageUrl="Just some text here" name="Terry Johnson" size="xxs" {...props} /> <Avatar imageUrl="Just some text here" name="Terry Johnson" size="xs" {...props} /> <Avatar imageUrl={4} name="Terry Johnson" size="sm" {...props} /> <Avatar imageUrl="https://google.com" name="Terry Johnson" size="md" {...props} /> <Avatar imageUrl="" name="Terry Johnson" size="lg" {...props} /> <Avatar imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg" name="Terry Johnson" size="xl" {...props} /> </div> ) } export default AvatarNoImage
The Status prop is used to display a user's online status like popular chat apps.
import React from 'react' import { Avatar } from '../../' const AvatarStatus = (props) => { return ( <> <Avatar imageAlt="Terry Johnson Status" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="sm" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Online" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="sm" status="online" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Away" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="sm" status="away" {...props} /> <br /> <Avatar imageAlt="Terry Johnson Offline" imageUrl="https://randomuser.me/api/portraits/men/44.jpg" name="Terry Johnson" size="sm" status="offline" {...props} /> <br /> </> ) } export default AvatarStatus
import React from 'react' import AvatarActionButton from '../_avatar_action_button' const AvatarActionButtonDefault = (props) => ( <div className="pb--doc-demo-row"> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Sophia Carden" name="Sophia Carden" {...props} /> </div> ) export default AvatarActionButtonDefault
import React from 'react' import AvatarActionButton from '../_avatar_action_button' const AvatarActionButtonPlacement = (props) => ( <div className="pb--doc-demo-row"> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Sophia Carden" name="Sophia Carden" placement="bottom_left" {...props} /> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Sophia Carden" name="Sophia Carden" placement="bottom_right" {...props} /> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Sophia Carden" name="Sophia Carden" placement="top_left" {...props} /> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Sophia Carden" name="Sophia Carden" placement="top_right" {...props} /> </div> ) export default AvatarActionButtonPlacement
import React from 'react' import AvatarActionButton from '../_avatar_action_button' const AvatarActionButtonActions = (props) => ( <div className="pb--doc-demo-row"> <AvatarActionButton action="add" imageAlt="Add Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Add Sophia Carden" name="Sophia Carden" {...props} /> <AvatarActionButton action="remove" imageAlt="Remove Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Remove Sophia Carden" name="Sophia Carden" {...props} /> </div> ) export default AvatarActionButtonActions
import React from 'react' import AvatarActionButton from '../_avatar_action_button' const AvatarActionButtonOnClick = (props) => ( <div className="pb--doc-demo-row"> <AvatarActionButton imageAlt="Sophia Carden" imageUrl="https://randomuser.me/api/portraits/women/8.jpg" linkAriaLabel="Alert Sophia Carden" linkUrl="https://www.google.com" name="Sophia Carden" onClick={() => alert('clicked!')} {...props} /> </div> ) export default AvatarActionButtonOnClick
import React from 'react' import { MultipleUsers } from '../../' const MultipleUsersDefault = (props) => { return ( <div> <MultipleUsers users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, { name: 'Beverly Reyes', imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg', }, { name: 'Keith Craig', imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg', }, { name: 'Alicia Cooper', imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg', }, ]} {...props} /> <br /> <br /> <MultipleUsers users={[ { name: 'Shawn Palmer', imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg', }, { name: 'Andrew Murray Cooper Craig', }, ]} {...props} /> </div> ) } export default MultipleUsersDefault
import React from 'react' import { MultipleUsers } from '../../' const MultipleUsersReverse = (props) => { return ( <div> <MultipleUsers reverse users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, { name: 'Beverly Reyes', imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg', }, { name: 'Keith Craig', imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg', }, { name: 'Alicia Cooper', imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg', }, ]} {...props} /> <br /> <br /> <MultipleUsers reverse users={[ { name: 'Shawn Palmer', imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg', }, { name: 'Andrew Murray', }, ]} {...props} /> </div> ) } export default MultipleUsersReverse
User avatar default size is xs
or 28px
, but you can pass in xxs
to change avatar size to 20px
.
import React from 'react' import { Body, MultipleUsers } from '../../' const MultipleUsersSize = (props) => { return ( <div> <Body color="light" text="xs" /> <MultipleUsers users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, { name: 'Beverly Reyes', imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg', }, { name: 'Keith Craig', imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg', }, { name: 'Alicia Cooper', imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg', }, ]} {...props} /> <br /> <MultipleUsers marginTop="xs" size="xs" users={[ { name: 'Shawn Palmer', imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg', }, { name: 'Andrew Murray Cooper Craig', imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg', }, ]} {...props} /> <Body color="light" marginTop="xs" text="xxs" /> <MultipleUsers size="xxs" users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, { name: 'Beverly Reyes', imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg', }, { name: 'Keith Craig', imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg', }, { name: 'Alicia Cooper', imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg', }, ]} {...props} /> <br /> <MultipleUsers marginTop="xs" size="xxs" users={[ { name: 'Shawn Palmer', imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg', }, { name: 'Andrew Murray Cooper Craig', imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg', }, ]} {...props} /> </div> ) } export default MultipleUsersSize
import React from 'react' import MultipleUsersStacked from '../_multiple_users_stacked' const MultipleUsersStackedDefault = (props) => { return ( <div> <MultipleUsersStacked users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, ]} {...props} /> <br /> <br /> <MultipleUsersStacked users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, ]} {...props} /> <br /> <br /> <MultipleUsersStacked users={[ { name: 'Patrick Welch', imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', }, { name: 'Lucille Sanchez', imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', }, { name: 'Beverly Reyes', imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg', }, { name: 'Keith Craig', imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg', }, { name: 'Alicia Cooper', imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg', }, ]} {...props} /> </div> ) } export default MultipleUsersStackedDefault
import React from 'react' import { User } from '../../' const UserDefault = (props) => { return ( <div className="pb--doc-demo-row"> <div> <User align="center" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="vertical" size="lg" title="Remodeling Consultant" {...props} /> </div> <div> <User align="left" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="horizontal" title="Remodeling Consultant" {...props} /> </div> <div> <User align="left" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="horizontal" {...props} /> <br /> <User align="left" avatar name="Anna Black" orientation="horizontal" {...props} /> </div> </div> ) } export default UserDefault
import React from 'react' import { User } from '../../' const UserWithTerritory = (props) => { return ( <div className="pb--doc-demo-row"> <div> <User align="center" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="vertical" size="lg" territory="PHL" title="Remodeling Consultant" {...props} /> </div> <div> <User align="left" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="horizontal" territory="PHL" title="Remodeling Consultant" {...props} /> </div> <div> <User align="center" name="Anna Black" orientation="horizontal" size="sm" territory="PHL" title="Remodeling Consultant" {...props} /> <br /> <User align="left" name="Anna Black" orientation="horizontal" size="lg" territory="PHL" title="Remodeling Consultant" {...props} /> </div> </div> ) } export default UserWithTerritory
import React from 'react' import { User } from '../../' const UserTextOnly = (props) => { return ( <div className="pb--doc-demo-row"> <User align="center" name="Anna Black" orientation="horizontal" size="lg" title="Remodeling Consultant" {...props} /> <User align="left" name="Anna Black" orientation="horizontal" title="Remodeling Consultant" {...props} /> </div> ) } export default UserTextOnly
import React from 'react' import { User } from '../../' const UserDefault = (props) => { return ( <div className="pb--doc-demo-row"> <User avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" size="sm" title="Remodeling Consultant" {...props} /> <User avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" size="md" title="Remodeling Consultant" {...props} /> <User avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" size="lg" title="Remodeling Consultant" {...props} /> </div> ) } export default UserDefault
import React from 'react' import { User } from '../../' const UserVerticalSize = (props) => { return ( <div> <User align="center" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="vertical" size="sm" title="Remodeling Consultant" {...props} /> <br /> <br /> <User align="center" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="vertical" size="md" title="Remodeling Consultant" {...props} /> <br /> <br /> <User align="center" avatarUrl="https://randomuser.me/api/portraits/women/44.jpg" name="Anna Black" orientation="vertical" size="lg" title="Remodeling Consultant" {...props} /> </div> ) } export default UserVerticalSize